/* Örnek şirket dosyası (21.10.2026): /ornek-profil/ ve /en/sample-profile/. Şablon front_end/home/ornek_profil.html, görünüm
   website/ornek_profil.py. Temel tasarım yeni_ana_sayfa.css'ten (renkler, .ekran, .zaman, .gazete, .yetki, .risk, .btn); burada yalnız
   bu sayfaya özgü kurallar, .op altında. Düzen gerçek profil ekranına (front_end/reports/company_profile_v2.html) benzer: başlık +
   etiketler + olgu satırı, sekmeler, kartlar, her bilgide kaynak çipi. Telefonda (≤600 px) tablolar satır kartına döner; 360 px'te
   yatay taşma yok (tests_ornek_profil + ekran görüntüsü). */
.op .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.op h2, .op h3, .op h4{margin:0}

/* ---------- Örnek bandı ---------- */
.op-band{display:flex; align-items:flex-start; gap:12px; margin-top:20px; padding:12px 16px; background:var(--warn-wash); border:1px solid #f1d7ad; color:var(--ink); font-size:14px; line-height:1.5}
.op-band p{margin:0}
.op-band strong{font-weight:700}
.op-band-b{flex-shrink:0; font:700 11px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--warn); border:1.5px solid var(--warn); padding:5px 8px; border-radius:3px; margin-top:1px}

/* ---------- Giriş ---------- */
.op-giris{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px 64px; align-items:end; padding-block:clamp(36px,5vw,64px) 28px}
.op-giris h1{font-size:clamp(36px,5vw,60px); line-height:1.04}
.op-giris-p{margin:0; color:var(--muted); font-size:17px; line-height:1.6; max-width:46ch}

/* ---------- Ekran ---------- */
.op-ekran{margin-bottom:clamp(48px,7vw,88px); font-size:14px}
.op-ekran .ekran-ust .yol{display:flex; gap:8px; flex-wrap:wrap; min-width:0}
.op-ekran .ekran-ust .yol b{color:var(--ink); font-weight:600}
.op-bas{position:relative; padding:24px 26px 20px; border-bottom:1px solid var(--hair)}
.op-kim{padding-right:120px}
.op-etiketler{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.op-etiket{display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--wash); color:var(--muted); white-space:nowrap}
.op-etiket.ok{background:var(--ok-wash); color:var(--ok)}
.op-etiket.uyari{background:var(--warn-wash); color:var(--warn)}
.op-etiket.mavi{background:var(--accent-wash); color:var(--accent)}
.op-ad{font-family:var(--f-display); font-size:clamp(26px,3.4vw,36px); font-weight:600; letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere}
.op-damga{position:absolute; top:22px; right:26px; font:700 13px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--alarm); border:2px solid var(--alarm); padding:8px 12px; border-radius:4px; transform:rotate(-6deg); opacity:.78; pointer-events:none}
.op-olgu{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 20px; margin:20px 0 0}
.op-olgu > div{min-width:0}
.op-olgu dt{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.op-olgu dd{margin:4px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-weight:600; overflow-wrap:anywhere}

/* ---------- Sekmeler (bölüm bağlantıları, yapışkan) ---------- */
.op-sekmeler{position:sticky; top:64px; z-index:5; display:flex; gap:22px; padding:0 26px; background:var(--bg); border-bottom:1px solid var(--hair); font-size:13.5px; overflow-x:auto; scrollbar-width:none}
.op-sekmeler::-webkit-scrollbar{display:none}
.op-sekmeler a{padding:12px 0; color:var(--muted); white-space:nowrap; text-decoration:none; border-bottom:2px solid transparent}
.op-sekmeler a[aria-current="true"]{color:var(--ink); font-weight:600; border-bottom-color:var(--accent)}
@media (hover:hover){ .op-sekmeler a:hover{color:var(--ink)} }

/* ---------- Bölümler ve kartlar ---------- */
.op-bolum{padding:24px 26px; scroll-margin-top:120px}
.op-bolum + .op-bolum{border-top:1px solid var(--hair)}
.op-ikili{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start}
.op-ic{margin-top:20px}
.op-kart{min-width:0; border:1px solid var(--hair); background:var(--bg); padding:18px 20px}
.op-kart + .op-kart{margin-top:20px}
.op-ikili > .op-kart + .op-kart{margin-top:0}
.op-kart-bas{margin-bottom:12px}
.op-kart-bas h3{font-family:var(--f-body); font-size:15px; font-weight:700; letter-spacing:0}
.op-kart-bas p{margin:2px 0 0; font-size:12.5px; color:var(--muted)}
.op-not{margin:12px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.op-alt-bas{margin:18px 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}

/* Künye: etiket – değer – kaynak */
.op-kunye{margin:0}
.op-kunye > div{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:4px 12px; padding:9px 0; border-bottom:1px solid var(--hair)}
.op-kunye > div:last-child{border-bottom:0}
.op-kunye dt{color:var(--muted); font-size:13px}
.op-kunye dd{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; overflow-wrap:anywhere}

/* Son değişiklikler */
.op-son{list-style:none; margin:0; padding:0}
.op-son li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 0; border-bottom:1px solid var(--hair)}
.op-son li:last-child{border-bottom:0}
.op-son .tarih{grid-column:1; font-size:12px; color:var(--muted)}
.op-son b{grid-column:1; font-size:14px}
.op-son .ozet{grid-column:1; font-size:13px; color:var(--muted)}
.op-son .op-gor{grid-column:2; grid-row:1 / span 3; align-self:center}
.op .gor{text-decoration:none; display:inline-flex; align-items:center}

/* Kaynak çipi */
.op-kyn{display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font:500 11.5px/1 var(--f-mono); color:var(--accent); background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:999px; padding:4px 8px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s}
.op-kyn.kap{color:#5a3fb0; background:#f1edfb; border-color:#dcd2f4}
.op-kyn svg{flex-shrink:0}
@media (hover:hover){ .op-kyn:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)} .op-kyn.kap:hover{background:#5a3fb0; border-color:#5a3fb0; color:#fff} }
@media (pointer:coarse){ .op-kyn{padding:7px 10px; font-size:12px} }

/* Tablolar */
.op-t{width:100%; border-collapse:collapse; font-size:13px}
.op-t th.kaynak, .op-t td.kaynak{text-align:right; width:1%; white-space:nowrap; padding-right:0}
.op-t td{vertical-align:middle}
.op-t td small{display:block}
.op .yetki{display:inline-block; white-space:normal; line-height:1.4}
.op-t-cubuk{width:18%; min-width:80px}
.op-cubuk{display:block; width:100%; height:6px; margin-top:6px}
.op-t-cubuk .op-cubuk{margin-top:0}
.op-cubuk rect, .op-olcu rect{fill:var(--accent)}
.op-cubuk rect.z, .op-olcu rect.z{fill:var(--wash)}
.op-t-ek td{color:var(--muted)}

/* Listeler */
.op-liste{list-style:none; margin:0; padding:0}
.op-liste li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hair)}
.op-liste li:last-child{border-bottom:0}
.op-liste li > div{min-width:0}
.op-liste small{display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:2px}
.op-oran{font-family:var(--f-mono); font-size:12.5px; color:var(--accent); font-weight:600}

/* Esas sözleşme */
.op-madde{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px}
.op-madde li{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--hair)}
.op-madde-no{font-size:12px; color:var(--muted); padding-top:2px}
.op-madde p{margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.5}

/* İlan zaman çizelgesi */
.op-zaman li{scroll-margin-top:120px}
.op-zaman li:target{background:var(--accent-wash)}
.op-zaman li > div{min-width:0}
.op-metin{margin-top:6px; font-size:12.5px}
.op-metin summary{cursor:pointer; color:var(--accent); font-weight:600; width:max-content; max-width:100%}
.op-metin p{margin:8px 0 2px; padding:10px 12px; background:var(--paper); border:1px solid var(--paper-line); font-family:var(--f-gazete); color:var(--paper-ink); font-size:13.5px; line-height:1.6}

/* Risk */
.op-risk-ozet{display:flex; align-items:center; gap:16px; max-width:420px; margin-bottom:14px}
.op-risk-ozet b{color:var(--warn)}
.op-olcu{display:block; flex:1; height:6px}
.op-olcu rect:not(.z){fill:#c98a1b}
.op-risk{list-style:none; margin:0; padding:0}
.op-risk li{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--hair)}
.op-risk small{display:block; color:var(--muted); font-size:12.5px}
.op-puan{font-size:13px; font-weight:600; text-align:center; padding:4px 0; border-radius:4px; background:var(--wash)}
.op-seviye{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--wash); color:var(--muted); white-space:nowrap}
.rk-orta .op-puan, .rk-orta .op-seviye{background:var(--warn-wash); color:var(--warn)}
.rk-dusuk .op-puan, .rk-dusuk .op-seviye{background:var(--ok-wash); color:var(--ok)}
.op-kontrol > div{grid-template-columns:minmax(0,38%) minmax(0,1fr)}

/* ---------- Gerçek dosyada ---------- */
.op-nasil{padding-block:clamp(40px,6vw,72px); border-top:1px solid var(--hair)}
.op-nasil h2{font-size:clamp(28px,3.6vw,42px); line-height:1.1; margin-bottom:24px}
.op-nasil h2 em, .op-cta h2 em{font-style:italic; font-weight:400; color:var(--accent)}
.op-nasil ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.op-nasil li{border-top:2px solid var(--ink); padding-top:14px}
.op-nasil h3{font-family:var(--f-body); font-size:15px; font-weight:700; letter-spacing:0; margin-bottom:6px}
.op-nasil p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}

/* ---------- Son çağrı ---------- */
.op-cta{display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:20px 48px; align-items:end; padding-block:clamp(40px,6vw,72px); margin-bottom:clamp(32px,5vw,56px); border-top:1px solid var(--hair)}
.op-cta h2{font-size:clamp(30px,4vw,48px); line-height:1.08}
.op-cta p{margin:14px 0 0; color:var(--muted); font-size:17px; max-width:52ch}

/* ---------- Gazete penceresi ---------- */
.op-pencere{width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:1px solid var(--hair); background:var(--bg); color:var(--ink); box-shadow:0 40px 80px -30px rgba(10,40,90,.45); font-family:var(--f-body)}
.op-pencere::backdrop{background:rgba(21,27,35,.42)}
.op-pencere-ust{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 18px; border-bottom:1px solid var(--hair); background:var(--wash)}
.op-kapat{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--hair); background:var(--bg); border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ink)}
.op-gazete{margin:16px 18px 0}
.op-gazete p{font-size:15px; overflow-wrap:anywhere}
.op-ceviri{margin:12px 18px 0; padding:10px 12px; background:var(--accent-wash); font-size:13.5px; line-height:1.5}
.op-ceviri small{display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.op-ceviri p{margin:4px 0 0}
.op-pencere > .op-not{margin:12px 18px 18px}
.op-pencere .ornek-not{margin-left:0}

/* ---------- Duyarlı ---------- */
@media (max-width:1080px){
  .op-olgu{grid-template-columns:repeat(3,minmax(0,1fr))}
  .op-nasil ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .op-giris, .op-ikili, .op-cta{grid-template-columns:minmax(0,1fr)}
  .op-ikili > .op-kart + .op-kart{margin-top:0}
  .op-madde{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .op-band{font-size:13.5px; padding:10px 12px; margin-top:14px}
  .op-giris{padding-block:28px 20px}
  .op-giris h1{font-size:clamp(32px,9vw,40px)}
  .op-giris-p{font-size:16px}
  .op-bas{padding:18px 16px 16px}
  .op-kim{padding-right:0}
  .op-damga{top:12px; right:12px; font-size:11px; padding:6px 8px}
  .op-etiketler{padding-right:72px}
  .op-olgu{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px}
  .op-sekmeler{padding-inline:16px; gap:18px; top:64px}
  .op-bolum{padding:18px 12px}
  .op-kart{padding:14px 14px}
  .op-kunye > div, .op-kontrol > div{grid-template-columns:minmax(0,1fr); gap:2px}
  /* Tablo → satır kartı: her hücre etiketiyle (data-et) alt alta */
  .op-t thead{display:none}   /* başlıklar hücrelerin data-et etiketinde */
  .op-t, .op-t tbody, .op-t tr, .op-t td{display:block; width:100%}
  .op-t tr{padding:10px 0; border-bottom:1px solid var(--hair)}
  .op-t tr:last-child{border-bottom:0}
  .op-t td{border:0; padding:2px 0}
  .op-t td[data-et]{display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:8px; align-items:center}
  .op-t td[data-et]::before{content:attr(data-et); color:var(--muted); font-size:12px; font-family:var(--f-body); font-weight:400}
  .op-t td.sag{text-align:left}
  .op-t td[data-et] > *{justify-self:start}
  .op-t td.kaynak{text-align:left; width:100%; white-space:normal}
  .op-t td.kaynak .op-kyn{justify-self:start}
  .op-t td.op-t-cubuk{display:none}
  .op-t-ad{font-size:14px; padding-bottom:4px}
  .op-son li{grid-template-columns:minmax(0,1fr)}
  .op-son .op-gor{grid-column:1; grid-row:auto; justify-self:start; margin-top:6px}
  .op-madde li{grid-template-columns:minmax(0,1fr)}
  .op-madde li .op-kyn{justify-self:start}
  .op-liste li{flex-direction:column; align-items:flex-start; gap:6px}
  .op-risk li{grid-template-columns:40px minmax(0,1fr)}
  .op-risk li .op-kyn{grid-column:2; justify-self:start}
  .op-nasil ul{grid-template-columns:minmax(0,1fr); gap:18px}
  .op-cta .cta .btn{flex:1 1 100%}
  .op-gazete{margin:12px 12px 0}
  .op-ceviri{margin:10px 12px 0}
  .op-pencere > .op-not{margin:10px 12px 14px}
}
@media (prefers-reduced-motion:reduce){ .op-kyn{transition:none} }