/* heworx blog, tam sayfa surumu. Tipografi polygon.com dili: basliklar ve
   arayuz etiketleri Montserrat (700-900), govde Roboto. Vurgu heworx teali. */
@font-face{font-family:'Stick No Bills';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/snb-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Stick No Bills';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/snb-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF}

:root{
  --vurgu:#0d9488;--vurgu2:#0b6e65;--murekkep:#151a20;--gri:#6b7480;--ince:#e4e4e4;
  --kagit:#fff;--kagit2:#f4f4f4;--kart:#fff;
  --baslik:'Montserrat',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --sans:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --govde:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'VT323',ui-monospace,monospace;
  --golge:0 18px 40px -30px rgba(16,20,27,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kagit);color:var(--murekkep);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--baslik);font-weight:800;line-height:1.16;margin:0;letter-spacing:-.01em}
h1{font-weight:900;letter-spacing:-.02em}
.kap{width:min(1240px,100% - 48px);margin-inline:auto}
.atla{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.atla:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:4px}

/* --- ust serit --- */
.ust{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid #000;
  transition:box-shadow .3s ease}
.ust.kucuk{box-shadow:0 10px 30px -24px rgba(16,20,27,.9)}
/* Ilk acilista polygon duzeni: logo ortada, altinda ortalanmis menu.
   Kaydirinca tek satira iner, logo sola gecer, menu ortada kalir. */
.ustIc{display:grid;align-items:center;column-gap:20px;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"bos marka araclar" "menu menu menu";
  grid-template-rows:102px 48px;
  transition:grid-template-rows .3s ease}
.ust.kucuk .ustIc{grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"marka menu araclar";grid-template-rows:58px}
.ustAraclar{grid-area:araclar;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
/* logo: daha buyuk, harfler sik */
.marka{display:inline-flex;align-items:center;text-decoration:none;font-family:'Stick No Bills',var(--sans);
  font-size:76px;font-weight:700;line-height:1;letter-spacing:-.045em;flex:none;
  grid-area:marka;justify-self:center;transition:font-size .3s ease}
.ust.kucuk .marka{font-size:40px;justify-self:start}

.marka span{color:#000}
.marka b{color:var(--vurgu);font-weight:700}
/* BLOG etiketi logonun dikey ortasinda, logodan belirgin kucuk */
.marka em{font:700 .19em/1 var(--baslik);letter-spacing:.2em;color:#fff;background:#000;
  padding:.28em .42em .22em;margin-left:.16em;font-style:normal;position:relative;top:.02em}
/* menu: NME olculeri — 16px, 700, 2px aralik, buyuk harf, saf siyah */
.menu{grid-area:menu;display:flex;align-items:center;justify-content:center;gap:26px;min-width:0;
  border-top:1px solid var(--ince);height:100%;transition:gap .3s ease}
.ust.kucuk .menu{gap:18px;border-top:0;justify-content:center}
.menu a{position:relative;padding:0 2px 3px;text-decoration:none;white-space:nowrap;color:#181818;
  font:700 15px/24px var(--baslik);letter-spacing:.06em;text-transform:uppercase;
  transition:color .15s,font-size .3s ease}
.ust.kucuk .menu a{font-size:13.5px}
/* polygon'daki gibi maddeler arasinda kucuk yuvarlak ayrac */
.menu a+a:before{content:'';position:absolute;left:-15px;top:50%;width:4px;height:4px;margin-top:-2px;
  border-radius:50%;background:#bfbfbf;transition:left .3s ease}
.ust.kucuk .menu a+a:before{left:-12px}
.menu a:after{content:'';position:absolute;left:4px;right:4px;bottom:0;height:3px;background:var(--vurgu);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.menu a:hover{color:var(--vurgu)}
.menu a:hover:after{transform:scaleX(1)}
.menu a.etkin{color:var(--vurgu)}
.menu a.etkin:after{transform:scaleX(1)}
/* ust seritteki kisayollar: Google'da tercih edilen kaynak ve bulten */
.ustGoogle{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;flex:none;
  border:1px solid #d8d8d8;border-radius:17px;text-decoration:none;color:#181818;background:#fff;
  font:700 12.5px/1 var(--baslik);letter-spacing:.01em;white-space:nowrap;transition:border-color .2s,box-shadow .2s,height .3s ease}
.ustGoogle:hover{border-color:#9aa1a9;box-shadow:0 6px 16px -12px rgba(16,20,27,.8)}
.ust.kucuk .ustGoogle{height:30px;padding:0 9px}
/* kucuk seritte etiket gizlenir, menu sikismasin */
.ust.kucuk .ustGoogle span{display:none}
@media (max-width:1180px){ .ustGoogle span{display:none} .ustGoogle{padding:0 9px} }
/* kucuk seritte daireler de kuculsun, cubuk 50 piksele iniyor */
.ust.kucuk .ustBulten,.ust.kucuk .araDugme{width:36px;height:36px}
.ust.kucuk .ustBulten svg,.ust.kucuk .araDugme svg{width:19px;height:19px}
/* Cizgisel simgeler beyaz zeminde kayboluyordu: cerceveli daire icine
   alindi, paylasim rayindaki dugmelerle ayni dil. */
.ustBulten{width:42px;height:42px;display:grid;place-items:center;flex:none;color:var(--murekkep);
  text-decoration:none;border:1px solid var(--ince);border-radius:50%;background:#fff;
  transition:background .18s,color .18s,border-color .18s}
.ustBulten:hover{background:var(--murekkep);border-color:var(--murekkep);color:#fff}
.ustBulten svg{width:21px;height:21px}
/* arama: NME gibi yalniz simge, tiklayinca tam ekran acilir */
.araDugme{width:42px;height:42px;display:grid;place-items:center;flex:none;cursor:pointer;
  color:var(--murekkep);text-decoration:none;border:1px solid var(--ince);border-radius:50%;background:#fff;
  transition:background .18s,color .18s,border-color .18s}
.araDugme:hover{background:var(--murekkep);border-color:var(--murekkep);color:#fff}
.araDugme svg{width:21px;height:21px}
/* --- tam ekran arama --- */
.araTam{position:fixed;inset:0;z-index:200;background:var(--kagit);display:flex;flex-direction:column;overflow:hidden}
.araTam[hidden]{display:none}
.araTamBar{border-bottom:2px solid #000;background:#fff;flex:none}
.araTamForm{display:flex;align-items:center;gap:14px;height:86px}
.araTamForm>svg{flex:none;color:#000}
.araTamGir,#araTamGir{flex:1;min-width:0;border:0;outline:0;background:none;color:#000;
  font:700 clamp(22px,3.4vw,34px)/1.2 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:-.01em}
#araTamGir::placeholder{color:#b8b2a6}
#araTamGir::-webkit-search-cancel-button{display:none}
.araTamSil{width:36px;height:36px;border:0;border-radius:50%;background:var(--kagit2);color:#3c444e;font-size:22px;line-height:1;cursor:pointer;flex:none}
.araTamSil:hover{background:#e6e1d6}
.araTamKapat{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:2px solid #000;background:#fff;color:#000;cursor:pointer;flex:none;
  font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.4px;text-transform:uppercase}
.araTamKapat span{font:700 10px var(--sans);letter-spacing:1px;background:#000;color:#fff;padding:3px 5px}
.araTamKapat:hover{background:#000;color:#fff}
.araTamKapat:hover span{background:#fff;color:#000}
.araTamIc{flex:1;overflow-y:auto;padding:26px 0 60px}
.araBolum{margin-bottom:30px}
.araBolumBas{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--ince)}
.araBolumBas span{font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--murekkep)}
.araBolumBas button{border:0;background:none;cursor:pointer;font:700 11.5px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--gri)}
.araBolumBas button:hover{color:var(--vurgu)}
.araGecmis{display:flex;flex-wrap:wrap;gap:8px}
.araGecmis .oge{display:inline-flex;align-items:center;border:1px solid var(--ince);background:#fff}
.araGecmis .oge button{border:0;background:none;cursor:pointer;font:600 14px var(--sans);color:var(--murekkep);padding:8px 10px 8px 12px;display:inline-flex;align-items:center;gap:8px}
.araGecmis .oge .sil{padding:8px 10px;color:var(--gri);font-size:16px;line-height:1}
.araGecmis .oge:hover{border-color:var(--murekkep)}
.araGecmis .oge .sil:hover{color:#c0392b}
.araRaf{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.araRafKart{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.araRafKart img{width:100%;aspect-ratio:40/21;object-fit:cover;background:#f0f0f0}
.araRafKart b{font:700 13.5px/1.34 'Helvetica Neue',Helvetica,Arial,var(--sans);color:var(--murekkep)}
.araRafKart small{font:11.5px var(--sans);color:var(--gri);text-transform:uppercase;letter-spacing:.08em}
.araRafKart:hover b{color:var(--vurgu)}
.araEtiket{display:flex;flex-wrap:wrap;gap:8px}
.araEtiket a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--ince);background:#fff;text-decoration:none;
  font:600 13.5px var(--sans);color:#3c444e}
.araEtiket a i{font-style:normal;font:700 11px var(--sans);color:var(--gri)}
.araEtiket a:hover{border-color:var(--vurgu);color:var(--vurgu)}
.araTamSonuc[hidden]{display:none}
.araSayi{margin:0 0 16px;font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--gri)}
.araSonucOge{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--ince);text-decoration:none;align-items:flex-start}
.araSonucOge:hover{background:#fff}
.araSonucOge img{width:168px;aspect-ratio:40/21;object-fit:cover;flex:none;background:#f0f0f0}
.araSonucOge .bilgi{min-width:0}
.araSonucOge .kat2{font:700 11px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--vurgu2)}
.araSonucOge h3{font:700 20px/1.28 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:-.01em;margin:5px 0 6px;color:var(--murekkep)}
.araSonucOge p{margin:0;font:14.5px/1.55 var(--sans);color:#4a525c}
.araSonucOge small{display:block;margin-top:7px;font:12.5px var(--sans);color:var(--gri)}
.araSonucOge mark{background:rgba(13,148,136,.18);color:inherit;padding:0 2px}
.araSonucOge.secili{background:#fff;outline:2px solid var(--vurgu)}
.araBos{padding:40px 0;font:17px var(--sans);color:var(--gri)}
.gorunum{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#000;color:#fff;
  text-decoration:none;white-space:nowrap;flex:none;font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);
  letter-spacing:1.5px;text-transform:uppercase;transition:background .15s}
.gorunum:hover{background:var(--vurgu)}
/* --- mobil menu: uc cizgi ve tam ekran panel (cunkukadiniz dili) --- */
.menuDugme{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;z-index:70;position:relative}
.menuDugme span{width:22px;height:2.5px;background:#000;border-radius:2px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease,width .3s ease}
body.menuAcik .menuDugme span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menuAcik .menuDugme span:nth-child(2){opacity:0;width:0}
body.menuAcik .menuDugme span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobilMenu{position:fixed;inset:0;z-index:60;display:block;overflow-y:auto;overscroll-behavior:contain;
  background:var(--kagit);padding:calc(var(--serit,62px) + 26px) 20px 48px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s}
body.menuAcik .mobilMenu{opacity:1;visibility:visible;transform:none}
.mobilIc{max-width:560px;margin-inline:auto}
.mobilAna a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:.46em 0;border-bottom:1px solid var(--ince);text-decoration:none;color:var(--murekkep);
  font:800 clamp(27px,7.4vw,34px)/1.16 var(--baslik);letter-spacing:-.02em;text-transform:uppercase}
.mobilAna a:after{content:'›';margin-left:auto;font:400 1.05em/0 var(--baslik);color:var(--gri)}
.mobilAna a.etkin,.mobilAna a:active{color:var(--vurgu)}
.mobilMenu h5{margin:32px 0 2px;font:800 11px/1 var(--baslik);letter-spacing:.2em;text-transform:uppercase;color:var(--vurgu)}
.mobilKucuk a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:.85em 0;
  border-bottom:1px solid var(--ince);text-decoration:none;color:var(--murekkep);font:500 16px/1.3 var(--govde)}
.mobilKucuk a:after{content:'›';font:400 1.1em/0 var(--baslik);color:var(--gri)}
.mobilAra{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;
  margin-top:30px;border:2px solid var(--murekkep);background:#fff;color:var(--murekkep);cursor:pointer;
  font:700 14px/1 var(--baslik);letter-spacing:.1em;text-transform:uppercase}
.mobilAra:active{background:var(--murekkep);color:#fff}
.mobilSosyal{display:flex;gap:12px;justify-content:center;margin:30px 0 0}
.mobilSosyal a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--ince);
  border-radius:50%;color:var(--murekkep);text-decoration:none}
.mobilSosyal a:active{background:var(--murekkep);color:#fff;border-color:var(--murekkep)}
body.menuAcik{overflow:hidden}
@media (min-width:861px){ .mobilMenu{display:none} }
/* panel acikken uc cizgi panelin ustunde kalsin, serit kendi katmanini
   yukseltir; yazar bandi varsa panel onun altindan baslar */
body.menuAcik .ust{z-index:70}
html.bantVar .mobilMenu{top:32px}
/* gundem seridi: NME'nin TRENDING bandi gibi */
.gundem{background:var(--kagit2);border-bottom:1px solid var(--ince)}
.gundemIc{display:flex;align-items:center;gap:14px;height:44px;overflow:hidden}
.gundemIc b{font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--murekkep);flex:none}
.gundemIc i{width:1px;height:16px;background:#cfcabd;flex:none}
.gundemIc a{font:500 14.5px/1 var(--govde);color:#3c444e;text-decoration:none;white-space:nowrap}
.gundemIc a:hover{color:var(--vurgu)}

/* --- vitrin --- */
.vitrin{display:grid;grid-template-columns:1.62fr 1fr;gap:34px;padding:38px 0 10px;align-items:stretch}
.lider{display:flex;flex-direction:column;gap:18px}
.liderGorsel{display:block;border-radius:18px;overflow:hidden;background:#f0f0f0;aspect-ratio:40/21;box-shadow:var(--golge)}
.liderGorsel img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.liderGorsel:hover img{transform:scale(1.02)}
.lider h1{font-size:clamp(28px,3.2vw,44px);line-height:1.08}
.lider h1 a{text-decoration:none}
.lider h1 a:hover{color:var(--vurgu2)}
.liderAlt{display:flex;flex-direction:column;gap:12px}
.lider .ozet{margin:0;font:400 17px/1.6 var(--govde);color:#3c444e;max-width:60ch}
.kat{display:inline-block;align-self:flex-start;padding:4px 11px;border-radius:999px;background:rgba(13,148,136,.12);color:var(--vurgu2);
  font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.kat:hover{background:var(--vurgu);color:#fff}
.meta{display:flex;gap:14px;align-items:center;margin:0;font:13px var(--sans);color:var(--gri)}
.meta span:before{content:'·';margin-right:14px}
/* Yan sutun polygon "Latest" duzeni: ustte baslik, her satirda once
   tarih, sonra manset, gorsel sagda, aralarda ince ayirac. */
.vitrinYan{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--ince);padding-left:30px}
.yanBaslik{font:900 24px/1 var(--baslik);letter-spacing:-.01em;margin:0 0 12px;padding-bottom:10px;
  text-transform:none;color:var(--vurgu);border-bottom:2px solid var(--murekkep)}

/* --- kartlar --- */
.kart{display:flex;flex-direction:column;gap:12px}
.kartGorsel{display:block;border-radius:14px;overflow:hidden;background:#f0f0f0;aspect-ratio:40/21}
.kartGorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.kart:hover .kartGorsel img{transform:scale(1.03)}
.kartAlt{display:flex;flex-direction:column;gap:8px}
.kart h3{font-size:19px;line-height:1.26}
.kart h3 a{text-decoration:none}
.kart:hover h3 a{color:var(--vurgu2)}
.kart .ozet{margin:0;font:15px/1.55 var(--sans);color:#4a525c}
.kart-kucukKart h3{font-size:16.5px}
.kart-kucukKart .ozet{display:none}
.kart-yan{flex-direction:row-reverse;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--ince)}
.kart-yan:first-of-type{padding-top:0}
.kart-yan:last-child{border-bottom:0}
.kart-yan .kartGorsel{width:132px;flex:none;aspect-ratio:16/9;border-radius:8px;align-self:flex-start}
.kart-yan .kartAlt{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.kart-yan .kartTarih{margin:0;font:700 11.5px/1 var(--baslik);letter-spacing:.06em;text-transform:uppercase;color:var(--vurgu2)}
.kart-yan h3{font:800 16px/1.28 var(--baslik);letter-spacing:-.005em}
.kart-yan .meta{margin:2px 0 0;font-size:12.5px}
.kart-yan .meta span:before{content:none;margin:0}
.kart-yan h3{font-size:17px;line-height:1.28}
.kart-yan .ozet{display:none}

/* --- bolumler --- */
.bolum{padding:34px 0}
/* bolum basligi: polygon'daki gibi kalin Montserrat, solunda kisa vurgu
   cubugu, altinda ince cizgi. Cizginin ilk parcasi vurgu renginde. */
.bolumUst{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;
  padding-bottom:12px;border-bottom:1px solid var(--ince);position:relative}
.bolumUst:after{content:'';position:absolute;left:0;bottom:-1px;width:74px;height:3px;background:var(--murekkep)}
.bolumUst h2{display:flex;align-items:center;gap:11px;font:900 22px/1 var(--baslik);letter-spacing:-.005em;
  text-transform:uppercase;color:var(--vurgu)}
.bolumUst h2:before{content:'';width:7px;height:22px;border-radius:2px;background:var(--murekkep);flex:none}
.tumu{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 var(--baslik);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gri);text-decoration:none;white-space:nowrap;transition:color .18s,gap .18s}
.tumu:after{content:'→';font-size:13px;line-height:1}
.tumu:hover{color:var(--vurgu);gap:9px}
.izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.izgara4{grid-template-columns:repeat(4,1fr);gap:26px 22px}
.izgaraYazi{grid-template-columns:repeat(3,1fr);gap:24px 20px}
.ikiSutun{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:44px;align-items:start;padding-bottom:20px}
.yanSutun{position:sticky;top:86px;display:flex;flex-direction:column;gap:26px}
.yanKutu h2{display:flex;align-items:center;gap:9px;font:900 15px/1 var(--baslik);letter-spacing:.02em;color:var(--vurgu);
  text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--ince);position:relative}
.yanKutu h2:before{content:'';width:5px;height:16px;border-radius:2px;background:var(--murekkep);flex:none}
.yanKutu h2:after{content:'';position:absolute;left:0;bottom:-1px;width:48px;height:2px;background:var(--murekkep)}
.listeKutu{display:flex;flex-direction:column}
.satir{display:flex;gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ince);text-decoration:none}
.satir:last-child{border-bottom:0}
.satirNo{font:800 17px/1.32 var(--baslik);color:var(--vurgu);flex:none;width:22px;letter-spacing:-.01em}
.satirIc b{display:block;font:800 17px/1.32 var(--baslik);letter-spacing:-.012em;color:var(--murekkep)}
.satirIc small{display:block;margin-top:5px;font:12.5px var(--sans);color:var(--gri)}
.satir:hover b{color:var(--vurgu2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
.etiketBulut{display:flex;flex-wrap:wrap;gap:7px}
.etiketBulut a{padding:5px 11px;border:1px solid var(--ince);border-radius:999px;background:#fff;text-decoration:none;font:500 12.5px var(--sans);color:#4a525c}
.etiketBulut a:hover{border-color:var(--vurgu);color:var(--vurgu)}

/* --- bulten --- */
.bultenKutu{background:var(--murekkep);color:#fff;border-radius:18px;padding:26px 26px 22px;margin:20px 0 44px}
.bultenKutu h2{font-size:20px;letter-spacing:-.01em;color:#fff;border:0;padding:0;margin:0 0 6px}
.bultenKutu p{margin:0 0 16px;font:14.5px/1.55 var(--sans);color:#b9c1ca}
.bultenForm{display:flex;flex-wrap:wrap;gap:10px}
.bultenForm input[type=email]{flex:1;min-width:190px;height:46px;padding:0 15px;border:1px solid #363d46;border-radius:12px;background:#1d242c;color:#fff;font:15px var(--sans)}
.bultenForm input[type=email]::placeholder{color:#7b848e}
.bultenForm button{height:46px;padding:0 22px;border:0;border-radius:12px;background:var(--vurgu);color:#fff;font:600 15px var(--sans);cursor:pointer;transition:background .15s}
.bultenForm button:hover{background:#12b0a1}
.bultenForm .onay{flex:0 0 100%;display:flex;gap:9px;align-items:flex-start;font:12.5px/1.45 var(--sans);color:#aab2bb;cursor:pointer}
.bultenForm .onay input{margin-top:2px;accent-color:var(--vurgu)}
.bultenForm .durum{flex:0 0 100%;margin:0;font:13px var(--sans);color:#8fe0d4;min-height:18px}
.bultenForm .durum.kotu{color:#ffb4a8}
.ikiSutun .bultenKutu,.yaziYan .bultenKutu{margin:0}

/* --- liste sayfalari --- */
.sayfaBas{padding:36px 0 26px;border-bottom:2px solid var(--murekkep);margin-bottom:28px}
.ustEtiket{margin:0 0 8px;font:700 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vurgu2)}
.sayfaBas h1{font-size:clamp(30px,3.6vw,44px)}
.sayfaSayi{margin:10px 0 0;font:14px var(--sans);color:var(--gri)}
.bosluk{padding:40px 0;color:var(--gri)}
.sayfalama{display:flex;gap:18px;align-items:center;justify-content:center;padding:36px 0 10px;font:600 14px var(--sans)}
.sayfalama a{text-decoration:none;padding:9px 16px;border:1px solid var(--ince);border-radius:999px;background:#fff}
.sayfalama a:hover{border-color:var(--vurgu);color:var(--vurgu)}
.sayfalama span{color:var(--gri)}

/* --- yazi --- */
/* yazi duzeni: govde solda, logonun hizasinda baslar; sagda yapiskan kolon */
/* --- yazi girisi: kapak solda, kunye sagda, arkada kapagin bulanik hali --- */
/* Kapagin bulanik hali sayfanin en tepesinden baslar, menunun arkasindan
   gecer ve asagi dogru kagida karisir. Ust serit bu bolgede saydam durur. */
/* Fon bulanik degil: gorsel oldugu gibi duruyor, yalnizca saydamligi
   dusuruluyor ve beyaza yaklastiriliyor. Boylece kapagin cizgileri
   secilir ama yazinin okunmasina karismaz. */
.yaziFon{position:absolute;top:0;left:0;right:0;height:820px;z-index:0;overflow:hidden;pointer-events:none}
.yaziFon i{position:absolute;inset:0;display:block;background-image:var(--kapak);
  background-size:cover;background-position:center 28%;
  opacity:.22;filter:saturate(.85)}
/* Ust bant, menu ve gundem seridi fonun ilk dortte birine denk geliyor,
   orada beyaz guclu tutuluyor ki yazilar okunsun. Basligin ve kapagin
   hizasinda gorsel aciliyor, asagida kagida karisiyor. Bant yok, tek
   parca bir gecis. */
.yaziFon:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.76) 10%,
    rgba(255,255,255,.62) 18%,rgba(255,255,255,.3) 26%,rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.62) 84%,#fff 100%)}
html.bantVar .yaziFon{top:32px}
/* Ust serit fonun uzerinde duruyor. Tamamen saydam olunca teal "worx"
   okunmuyordu, bu yuzden ince beyaz cam katman var. Yapiskanligi bozmamak
   icin .ust'un position ve z-index degerlerine dokunulmuyor. */
body.fonlu .ust,body.fonlu .gundem{background:transparent;border-bottom-color:transparent;
  transition:background .3s ease,border-color .3s ease}
body.fonlu .ust.kucuk{background:#fff;border-bottom-color:#000}
body.fonlu .kap,body.fonlu .gundem,body.fonlu .yaziUst{position:relative;z-index:1}
.yaziUst{position:relative;padding:22px 0 30px;margin-bottom:6px}
.yaziUstIc{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:40px;align-items:center}
/* kapak polygon'daki gibi cerceveli ve kosesi kesik.
   Gorsel 3:2 geliyordu, kunye alani boyunca alcak kaliyordu. 4:3'e
   kirpilip yukari cekiliyor: negatif ust ve esit alt bosluk, ortalamayi
   bozmadan gorseli yukari tasiyor. */
.yaziUst .yaziKapak{--kes:30px;margin:-26px 0 26px;padding:5px;background:var(--vurgu);
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes));
  box-shadow:0 34px 70px -44px rgba(16,20,27,.9)}
.yaziUst .yaziKapak img{--kes:26px;border-radius:0;display:block;
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes))}
.yaziUst .yaziKapak figcaption{padding-top:8px}
.yaziUstYazi{min-width:0}
.yaziUstIc:not(:has(.yaziKapak)){grid-template-columns:minmax(0,1fr)}

/* --- yazi duzeni: solda dikey paylasim rayi, ortada govde, sagda yan sutun --- */
/* Govde kabin sol kenarindan basliyor, dikey ray olcunun disinda kaliyor:
   sayfanin sol bosluguna oturuyor. Bosluk daralinca once etiketler, sonra
   rayin kendisi cekiliyor, govdenin genisligi hic degismiyor. */
.yaziDuzen{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:0 40px;align-items:start;padding:22px 0 0}
.rayYuva{position:absolute;top:0;height:100%;width:124px;left:max(-140px,calc(8px - (50vw - 50%)))}
/* Dikey ray: solda etiket, sagda dolu ikon, dairelerin arasinda ince bag */
.paylasRay{position:sticky;top:132px;display:flex;flex-direction:column;align-items:flex-end;gap:0}
@media (max-width:1500px){ .rayAd{display:none} .rayYuva{width:52px} }
.rayOge{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:11px;
  padding:7px 0;border:0;background:none;cursor:pointer;text-decoration:none;color:var(--murekkep)}
.rayOge+.rayOge:before{content:'';position:absolute;right:21px;top:-9px;width:1px;height:18px;background:var(--ince)}
.rayAd{font:400 13px/1 var(--govde);color:#5a626b;white-space:nowrap;transition:color .18s}
.rayOge i{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--ince);background:#fff;color:var(--murekkep);
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.rayOge:hover i{background:var(--murekkep);color:#fff;border-color:var(--murekkep);transform:scale(1.06)}
.rayOge:hover .rayAd{color:var(--murekkep)}
.paylasRay .begenDugme.acik i{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.paylasRay .begenDugme.acik .rayAd{color:var(--vurgu2)}
.yaziAna{min-width:0;max-width:none}
.yaziYan{padding-top:6px}
.yazi{padding:0}
.yaziBas{max-width:none;margin:0}
.yol{margin:0 0 14px;font:600 12.5px var(--sans);color:var(--gri);display:flex;gap:8px;flex-wrap:wrap}
.yol a{text-decoration:none}
.yol a:hover{color:var(--vurgu)}
.yaziBas h1{font-size:clamp(32px,4vw,50px);line-height:1.08}
.yaziUstYazi h1{font-size:clamp(34px,3.1vw,46px);line-height:1.1;letter-spacing:-.015em}
.yaziSpot{margin:14px 0 0;font:400 20px/1.5 var(--baslik);letter-spacing:-.005em;color:#41494f}
.yaziMeta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:24px 0 0;padding:16px 0;border-top:1px solid var(--ince);border-bottom:1px solid var(--ince)}
.yazar{display:flex;align-items:center;gap:12px}
/* beyaz zeminli kurum avatari beyaz sayfada kayboluyordu, ince halka */
.yazar img{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--ince)}
.yazar b{display:block;font:600 15px var(--sans)}
.yazar small{font:13px var(--sans);color:var(--gri)}
.paylas{display:flex;gap:8px}
.paylas a,.paylas button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ince);border-radius:50%;background:#fff;color:#3c444e;cursor:pointer;text-decoration:none;transition:.15s}
.paylas a:hover,.paylas button:hover{border-color:transparent;background:var(--murekkep);color:#fff;transform:translateY(-2px)}
.yaziKapak{margin:28px 0 0}
.yaziKapak img{width:100%;border-radius:18px;box-shadow:var(--golge)}
.yaziKapak figcaption{margin-top:10px;font:13.5px var(--sans);color:var(--gri);text-align:center}
.yaziSes{margin:26px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--ince);border-radius:14px;background:#fff}
.yaziSes p{margin:0;font:600 14px var(--sans)}
.yaziSes audio{flex:1;min-width:220px;height:36px}

/* yazi govdesi */
/* Gövde yazisi bigpara.hurriyet.com.tr olculerinde: isletim sisteminin
   kendi arayuz yazi tipi, 20/32, siyah, paragraf arasi 32 piksel.
   Basliklara dokunulmuyor. */
.yaziGovde{max-width:none;margin:32px 0 0;color:#000;
  font:400 20px/32px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:normal;word-spacing:normal}
.yaziGovde p{margin:0 0 32px;letter-spacing:normal}
.yaziGovde li{letter-spacing:normal}
.yaziGovde h2{font-size:28px;margin:1.7em 0 .5em;line-height:1.2;letter-spacing:-.02em}
.yaziGovde h3{font-size:22px;margin:1.5em 0 .45em;letter-spacing:-.015em}
.yaziGovde a{color:var(--vurgu2);text-underline-offset:3px;text-decoration-thickness:1px}
.yaziGovde a:hover{color:var(--vurgu)}
.yaziGovde ul,.yaziGovde ol{margin:0 0 32px;padding-left:1.4em}
.yaziGovde li{margin:.3em 0}
.yaziGovde blockquote{margin:1.7em 0;padding:4px 0 4px 24px;border-left:3px solid var(--vurgu);font-style:italic;color:#39414b}
.yaziGovde blockquote p:last-child{margin-bottom:0}
.yaziGovde figure{margin:2em 0}
.yaziGovde figure img,.yaziGovde figure video,.yaziGovde>img{width:100%;border-radius:14px;background:var(--kagit2)}
.yaziGovde figure.boy-k{max-width:62%;margin-inline:auto}
.yaziGovde figure.boy-t{width:min(820px,100%)}
.yaziGovde figcaption{margin-top:9px;font:13.5px/1.5 var(--sans);color:var(--gri);text-align:center}
.yaziGovde figure.yt{margin:26px 0}
.yaziGovde figure.yt a{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#10141b;cursor:pointer}
.yaziGovde figure.yt a img{width:100%;height:100%;object-fit:cover}
.yaziGovde figure.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#10141b}
.yaziGovde figure.yt a:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:46px;border-radius:12px;background:rgba(0,0,0,.65)}
.yaziGovde figure.yt a:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);z-index:2;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.yaziGovde hr{border:0;height:1px;background:var(--ince);margin:2.4em 0}
.yaziGovde code{font:.85em var(--mono);background:var(--kagit2);padding:1px 6px;border-radius:6px}
.yaziGovde pre{background:#171c22;color:#e7eaee;padding:18px;border-radius:14px;overflow:auto;font:14px/1.6 ui-monospace,monospace}
.yaziGovde div.not{margin:1.8em 0;padding:18px 20px;border:1px solid var(--ince);border-left:4px solid var(--vurgu);border-radius:12px;background:#fff;font:16.5px/1.6 var(--sans)}
.yaziGovde div.not p:last-child{margin-bottom:0}
/* ilgili yazi kartlari */
.yaziGovde figure.hy-ilgili{margin:2em 0}
.yaziGovde figure.hy-ilgili a{display:block;text-decoration:none;color:inherit;border-radius:16px;overflow:hidden;border:1px solid var(--ince);background:#fff;transition:transform .2s,box-shadow .2s}
.yaziGovde figure.hy-ilgili a:hover{transform:translateY(-2px);box-shadow:var(--golge)}
.yaziGovde figure.hy-ilgili img{border-radius:0;margin:0}
.yaziGovde figure.hy-ilgili figcaption{margin:0;padding:14px 18px 16px;background:#eef2f5;text-align:left}
.yaziGovde figure.hy-ilgili .et{display:block;font:700 11px var(--sans);letter-spacing:.14em;color:var(--vurgu);margin-bottom:4px}
.yaziGovde figure.hy-ilgili b{font:700 19px/1.34 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:-.01em}
.yaziGovde figure.hy-ilgiliSatir a{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:14px 16px;border-radius:12px;background:var(--kagit2)}
.yaziGovde figure.hy-ilgiliSatir .et{margin:0}
.yaziGovde figure.hy-ilgiliSatir b{font:600 17px/1.4 var(--sans)}
.yaziGovde figure.hy-ilgiliSatir .ok{color:var(--vurgu)}

.etiketSatir{max-width:none;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.etiketSatir a{padding:6px 13px;border:1px solid var(--ince);border-radius:999px;background:#fff;text-decoration:none;font:500 13px var(--sans);color:#4a525c}
.etiketSatir a:hover{border-color:var(--vurgu);color:var(--vurgu)}
.yazarKutu{max-width:none;margin:48px 0 0;display:flex;gap:18px;align-items:center;padding:22px;border:1px solid var(--ince);border-radius:18px;background:#fff}
.yazarKutu img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:#fff;border:1px solid var(--ince)}
.yazarKutu h3{font-size:17px;margin-bottom:4px}
.yazarKutu p{margin:0;font:14.5px/1.55 var(--sans);color:#4a525c}
.gecisler{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0 0}
.gecis{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--ince);border-radius:16px;background:#fff;text-decoration:none;transition:.18s}
.gecis:hover{border-color:var(--vurgu);transform:translateY(-2px)}
.gecis small{font:600 12px var(--sans);color:var(--gri)}
.gecis b{font:700 16px/1.32 'Helvetica Neue',Helvetica,Arial,var(--sans)}
.gecis.sag{text-align:right;align-items:flex-end}

/* --- alt --- */
.alt{margin-top:60px;background:var(--murekkep);color:#cbd2da}
.altIc{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:48px 0 36px}
.altMarka .marka{font-size:54px}
.altMarka .marka span{color:#fff}
/* footer'da da etiket logonun dikey ortasinda (ustteki serit gibi) */
.altMarka .marka em{background:#fff;color:#000;top:.02em}
.altMarka p{margin:14px 0 0;font:14.5px/1.6 var(--sans);color:#98a1ab;max-width:46ch}
.altSosyal{display:flex;gap:10px;margin-top:16px!important}
.altSosyal a{width:38px;height:38px;display:grid;place-items:center;border:1px solid #333b45;border-radius:50%;color:#cbd2da;transition:.15s}
.altSosyal a:hover{background:var(--vurgu);border-color:transparent;color:#fff}
.altSutun h4{font:700 12px 'Helvetica Neue',Helvetica,Arial,var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:#fff;margin-bottom:14px}
.altSutun a{display:block;padding:6px 0;text-decoration:none;font:14.5px var(--sans);color:#98a1ab}
.altSutun a:hover{color:#fff}
.altSutun small{color:#606a75;font-size:12px}
.altSerit{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 26px;border-top:1px solid #2a323b;font:13px var(--sans);color:#79828c}
.altAnahtar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.altAnahtar a{color:#98a1ab;text-decoration:none}
.altAnahtar a:hover{color:#fff;text-decoration:underline}
.altAnahtar i{font-style:normal;color:#4d565f}

/* --- yumusak gelisler --- */
.bel{opacity:0;transform:translateY(18px);
  transition:opacity .66s cubic-bezier(.22,.61,.36,1),transform .66s cubic-bezier(.22,.61,.36,1);transition-delay:var(--gec,0ms)}
.bel.gor{opacity:1;transform:none}
img.gecisli{opacity:0;transition:opacity .5s ease}
img.gecisli.yuklendi{opacity:1}

/* --- yukari butonu: cevresindeki halka okuma ilerlemesi --- */
.yukari{position:fixed;right:26px;bottom:26px;z-index:60;width:54px;height:54px;border:0;padding:0;background:none;cursor:pointer;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s}
.yukari.gor{opacity:1;transform:none;pointer-events:auto}
.yukari .kutu{position:absolute;inset:5px;border-radius:50%;background:#fff;box-shadow:0 10px 26px -12px rgba(16,20,27,.45);
  display:grid;place-items:center;color:#000;transition:background .2s,color .2s}
.yukari:hover .kutu{background:#000;color:#fff}
.yukari svg.halka{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)}
.yukari svg.halka circle{fill:none;stroke-width:3;stroke-linecap:round}
.yukari svg.halka .iz{stroke:#e4e4e4}
.yukari svg.halka .dolu{stroke:var(--vurgu);transition:stroke-dashoffset .12s linear,stroke .3s}
.yukari.bitti svg.halka .dolu{stroke:#000}
@media (max-width:560px){ .yukari{right:16px;bottom:16px;width:48px;height:48px} .yukari svg.halka{width:48px;height:48px} }
@media (prefers-reduced-motion:reduce){ .bel,img.gecisli{opacity:1!important;transform:none!important} }

@media (max-width:1080px){
  .vitrin{grid-template-columns:1fr;gap:26px}
  .vitrinYan{border-left:0;padding-left:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
  .yanBaslik{grid-column:1/-1}
  .kart-yan{flex-direction:column;border-bottom:0;padding-bottom:0}
  .kart-yan .kartGorsel{width:100%;aspect-ratio:40/21}
  .ikiSutun{grid-template-columns:1fr;gap:10px}
  .yaziDuzen{grid-template-columns:1fr;gap:20px}
  .rayYuva{display:none}
  .yaziUstIc{grid-template-columns:1fr;gap:22px}
  .yanSutun{position:static}
  .izgara4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .kap{width:min(1240px,100% - 32px)}
  .menu{display:none}
  /* mobilde logo ortada, solda uc cizgi, sagda araclar */
  .ustIc{grid-template-columns:1fr auto 1fr;grid-template-areas:"sol marka araclar";
    grid-template-rows:58px;column-gap:6px}
  .ust.kucuk .ustIc{grid-template-columns:1fr auto 1fr;grid-template-areas:"sol marka araclar";grid-template-rows:50px}
  .menuDugme{grid-area:sol;justify-self:start;margin-left:-8px}
  .marka{justify-self:center;font-size:53px}
  /* mobilde kaydirinca logo kuculur ama ortada kalir (masaustu kurali
     sola yaslamasin diye burada acikca yaziliyor) */
  .ust.kucuk .marka{font-size:40px;justify-self:center}
  .menuDugme{width:38px}
  .araDugme{width:36px}
  .ustAraclar{gap:2px}
  .ustBulten{display:none}
  .araRaf{grid-template-columns:repeat(3,1fr)}
  .araTamForm{height:70px;gap:10px}
  .araTamKapat span{display:none}
  .araSonucOge img{width:104px}
  .araSonucOge h3{font-size:18px}
  .araSonucOge p{display:none}
  .menuDugme{display:flex}
  .izgara{grid-template-columns:repeat(2,1fr)}
  .vitrinYan{grid-template-columns:1fr}
  .kart-yan{flex-direction:row}
  .kart-yan .kartGorsel{width:116px;aspect-ratio:4/3}
  .altIc{grid-template-columns:1fr;gap:28px;padding:36px 0 26px}
  .gecisler{grid-template-columns:1fr}
  .yaziGovde{font-size:19.5px;max-width:none}
  .izgaraYazi{grid-template-columns:repeat(2,1fr)}
  .yaziGovde figure.boy-t{width:100%;margin-inline:0}
}
@media (max-width:560px){
  .izgara,.izgara4{grid-template-columns:1fr}
  .araRaf{grid-template-columns:repeat(2,1fr)}
  .ustGoogle span{display:none}
  .ustGoogle{padding:0 9px}
  .ustBulten{width:32px}
  .gorunum{padding:0 11px}
  .ustIc{gap:10px}
  .marka{font-size:27px}

  .yaziMeta{gap:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- panele girmis yazar icin ust bant (ofis surumundekiyle ayni dil) --- */
.yazarBandi{position:fixed;top:0;left:0;right:0;height:32px;z-index:210;display:flex;align-items:center;gap:2px;padding:0 10px;
  background:#1d2229;color:#e6e8eb;font:500 12.5px/1 var(--sans)}
.yazarBandi a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;color:#e6e8eb;text-decoration:none;white-space:nowrap;border:0}
.yazarBandi a:hover{background:#2c323b;color:#fff}
.yazarBandi .bantLogo{font:700 15px/1 var(--sans);letter-spacing:-.02em;padding-right:12px}
.yazarBandi .bantSag{margin-left:auto}
.yazarBandi .bantAv{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--vurgu);display:grid;place-items:center;font:600 9.5px var(--sans);color:#fff}
.yazarBandi .bantAv img{width:100%;height:100%;object-fit:cover}
.yazarBandi .bantDuzenle{color:#7fe0d4}
html.bantVar body{padding-top:32px}
html.bantVar .ust{top:32px}
html.bantVar .yanSutun{top:118px}
html.bantVar .araTam{top:32px}
html.bantVar .yukari{bottom:26px}
@media (max-width:640px){ .yazarBandi .bantYazi{display:none} .yazarBandi a{padding:0 9px} }

/* Ilk boyada icerik gizli dursun, gecisi site.js baslatsin. Sinif yalniz
   JS varken ekleniyor, JS yoksa ya da gec kalirsa emniyet kalkani aciyor. */
html.js:not(.hazir) .lider,html.js:not(.hazir) .kart,html.js:not(.hazir) .bolumUst,
html.js:not(.hazir) .satir,html.js:not(.hazir) .yanKutu,html.js:not(.hazir) .bultenKutu,
html.js:not(.hazir) .gecis,html.js:not(.hazir) .yaziKapak,html.js:not(.hazir) .yazarKutu,
html.js:not(.hazir) .etiketSatir,html.js:not(.hazir) .sayfaBas,
html.js:not(.hazir) .yaziGovde > p,html.js:not(.hazir) .yaziGovde > h2,
html.js:not(.hazir) .yaziGovde > h3,html.js:not(.hazir) .yaziGovde > figure,
html.js:not(.hazir) .yaziGovde > ul,html.js:not(.hazir) .yaziGovde > ol,
html.js:not(.hazir) .yaziGovde > blockquote,html.js:not(.hazir) .yaziGovde > div{
  opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){ html.js:not(.hazir) *{opacity:1!important;transform:none!important} }
.sayfaOzet{margin:12px 0 0;font:400 17px/1.6 var(--govde);color:#3c444e;max-width:70ch}

.gizli{display:none!important}

.cerezAyar{cursor:pointer}

/* dar ekranda dikey ray gizlenir, kunyedeki paylasim satiri yeterli */
@media (max-width:1180px){ .rayYuva{display:none} }
@media (max-width:1080px){ .yaziDuzen{grid-template-columns:1fr} }

/* --- begeni: uyelik yok, secim tarayicida, sayi sunucuda --- */
.paylas .begenDugme{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ince);background:#fff;
  color:var(--murekkep);cursor:pointer;border-radius:50%;width:38px;height:38px;padding:0;
  font:700 13px/1 var(--baslik);transition:background .18s,color .18s,border-color .18s,transform .18s}
.begenDugme svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.paylasRay .begenDugme.acik svg{transform:scale(1.1) rotate(-8deg)}
.paylas .begenDugme:hover{border-color:var(--murekkep)}
.paylas .begenDugme.acik{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.paylas .begenDugme.acik svg{transform:scale(1.12) rotate(-8deg)}
/* sayi ekranda gorunmez, sunucuda yine sayiliyor */
.begenSayi{display:none}

.paylasRay .begenDugme:hover i{background:var(--vurgu);border-color:var(--vurgu);color:#fff}

/* --- yazi ozeti: daktilo etkisiyle yazilan brifing --- */
.paylasRay .ozetDugme.acik i{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.ozetKat{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:24px;
  background:rgba(16,20,27,.45);opacity:0;transition:opacity .28s ease}
.ozetKat.gor{opacity:1}
.ozetKat[hidden]{display:none!important}
.ozetKat:not(.gor){pointer-events:none}
/* baslik bolumu sabit, yalniz icerik kayiyor: kapatma dugmesi hep elde */
.ozetKutu{position:relative;width:min(680px,100%);max-height:min(82vh,720px);display:flex;flex-direction:column;
  overflow:hidden;background:#fff;border:2px solid var(--vurgu);border-radius:16px;
  box-shadow:0 40px 90px -50px rgba(16,20,27,.9);transform:translateY(14px) scale(.985);
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.ozetBas{flex:none;padding:20px 30px 14px;position:relative;border-bottom:1px solid var(--ince)}
/* yazarken pencere zıplamasin diye taban yukseklik */
.ozetIcerik{flex:1;overflow-y:auto;padding:18px 30px 24px;min-height:min(300px,52vh);-webkit-overflow-scrolling:touch}
.ozetKat.gor .ozetKutu{transform:none}
.ozetKapat{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--kagit2);font:400 22px/1 var(--baslik);color:var(--murekkep);cursor:pointer;z-index:3}
.ozetKapat:hover{color:var(--murekkep)}
.ozetUst{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding-right:38px;font:600 13px/1.35 var(--govde);color:var(--vurgu2)}
.ozetKivilcim{display:grid;place-items:center;color:var(--vurgu)}
.ozetKutu h2{font:900 24px/1.25 var(--baslik);letter-spacing:-.01em;margin:0 0 16px;min-height:1.25em}
.ozetGovde{font:400 15.5px/1.62 var(--govde);color:#333b44}
.ozetGovde h3{font:800 15px/1.4 var(--baslik);margin:20px 0 8px;color:var(--murekkep)}
.ozetGovde > h3:first-child{margin-top:0}
.ozetGovde ul{margin:0;padding-left:21px}
.ozetGovde li{margin:0 0 8px;padding-left:2px}
.ozetGovde ul:last-child li:last-child{margin-bottom:0}
.ozetNot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--ince);font:400 12.5px/1.55 var(--govde);color:var(--gri)}
.ozetYukleniyor{display:inline-block;width:9px;height:17px;background:var(--vurgu);vertical-align:-3px;
  animation:ozetImlec 1s steps(2) infinite}
@keyframes ozetImlec{0%,49%{opacity:1}50%,100%{opacity:0}}
body.ozetAcik{overflow:hidden}
@media (max-width:560px){
  .ozetKat{padding:0;place-items:end stretch}
  .ozetKutu{max-height:88vh;border-radius:16px 16px 0 0;border-bottom:0}
  .ozetBas{padding:16px 18px 12px}
  .ozetIcerik{padding:16px 18px 22px}
  .ozetKutu h2{font-size:21px}
  .ozetKapat{top:9px;right:10px}
}
.ozetTurler{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ozetTur{border:1px solid var(--ince);background:#fff;color:#4a525c;cursor:pointer;border-radius:18px;
  height:32px;padding:0 13px;font:600 12.5px/1 var(--govde);transition:background .18s,color .18s,border-color .18s}
.ozetTur:hover{border-color:var(--murekkep);color:var(--murekkep)}
.ozetTur.etkin{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
/* kunye satirindaki ozet dugmesi: dar ekranda dikey ray gizli oldugu icin */
.ozetKisa{width:38px;height:38px;padding:0;display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid var(--ince);background:#fff;color:var(--murekkep);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.ozetKisa:hover,.ozetKisa.acik{background:var(--vurgu);border-color:var(--vurgu);color:#fff}

/* --- emoji tepkileri: etiketlerin hemen ustunde, uyelik istemez --- */
/* tepki kutusu: zeminsiz, alti ustu ince cizgiyle ayrilmis, ortali */
.tepki{margin:52px 0 0;padding:34px 0 32px;border-top:1px solid var(--ince);border-bottom:1px solid var(--ince);
  background:none;border-radius:0;text-align:center}
.tepki h3{margin:0 0 24px;font:800 19px/1.3 var(--baslik);letter-spacing:-.01em;color:var(--murekkep)}
.tepkiSira{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
/* yalniz emoji, yazi yok: anlam title ve aria-label'da duruyor */
.tepkiDugme{position:relative;display:inline-grid;place-items:center;width:62px;height:62px;padding:0;cursor:pointer;
  border:1px solid var(--ince);border-radius:50%;background:#fff;color:var(--murekkep);
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.tepkiDugme:hover{border-color:var(--ince);transform:translateY(-2px)}
/* uzerine gelince teal halka kendini cizer (cunkukadiniz yazar bandindaki
   halkanin heworx hali) */
.tepkiHalka{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.tepkiHalka circle{fill:none;stroke:var(--vurgu);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:295;stroke-dashoffset:295;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){ .tepkiDugme:hover .tepkiHalka circle{stroke-dashoffset:0} }
.tepkiDugme:focus-visible .tepkiHalka circle{stroke-dashoffset:0}
.tepkiDugme.acik .tepkiHalka circle{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){ .tepkiHalka circle{transition:none} }
.tepkiAd{display:none}
.tepkiIm{font-size:30px;line-height:1;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.tepkiDugme:hover .tepkiIm{transform:scale(1.18)}
/* sayi ekranda gorunmuyor, sunucuda yine sayiliyor */
.tepkiSayi{display:none}
.tepkiDugme.acik{background:#e4f3f1;border-color:transparent;color:var(--vurgu2)}
.tepkiDugme.acik .tepkiIm{transform:scale(1.2)}

.tepkiTesekkur{margin:14px 0 0;font:400 13px/1.5 var(--govde);color:var(--vurgu2);text-align:center}
/* Telefonda alti dugme sabit genislikte sigmiyor, besi ust satirda biri
   altta kaliyordu. Izgaraya geciyorlar ve ekrana gore kuculuyorlar,
   boylece her genislikte tek satir. */
@media (max-width:560px){
  .tepki{padding:24px 0 22px}
  .tepki h3{font-size:17px;margin-bottom:16px}
  .tepkiSira{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;justify-content:stretch}
  .tepkiDugme{width:100%;height:auto;aspect-ratio:1;max-width:60px;justify-self:center}
  .tepkiIm{font-size:clamp(20px,6.2vw,27px)}
}
@media (max-width:360px){
  .tepkiSira{gap:6px}
}

/* cok dar telefonlarda logoya yer acmak icin OFIS yazisi gizlenir */
@media (max-width:400px){
  .gorunum{padding:0 11px;font-size:11.5px;letter-spacing:.06em}
  .marka{font-size:47px}
  .ust.kucuk .marka{font-size:36px;justify-self:center}
}

/* --- kurumsal belge sayfalari (gizlilik, sartlar, basin) --- */
.belgeUst{padding:44px 0 34px;border-bottom:1px solid var(--ince);margin-bottom:0}
.belgeUstIc{max-width:780px}
.belgeEtiket{margin:0 0 10px;font:800 11.5px/1 var(--baslik);letter-spacing:.2em;text-transform:uppercase;color:var(--vurgu)}
.belgeUst h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08}
.belgeOzet{margin:16px 0 0;font:400 19px/1.55 var(--baslik);color:#41494f;max-width:64ch}
.belgeTarih{margin:18px 0 0;font:400 13px/1 var(--govde);color:var(--gri)}
.belgeDuzen{display:grid;grid-template-columns:232px minmax(0,1fr);gap:0 54px;align-items:start;padding:36px 0 64px}
.belgeIcindekiler{position:sticky;top:120px;display:flex;flex-direction:column}
.belgeIcBaslik{margin:0 0 12px;font:800 11px/1 var(--baslik);letter-spacing:.18em;text-transform:uppercase;color:var(--gri)}
.belgeIcindekiler a{padding:9px 0 9px 14px;border-left:2px solid var(--ince);text-decoration:none;
  color:#4a525c;font:500 14px/1.35 var(--govde);transition:color .18s,border-color .18s}
.belgeIcindekiler a:hover{color:var(--murekkep);border-left-color:var(--murekkep)}
.belgeIletisim{margin-top:14px;border-left-color:var(--vurgu)!important;color:var(--vurgu2)!important;font-weight:600!important}
.belgeGovde{max-width:760px}
.belgeBolum{padding:0 0 34px;scroll-margin-top:150px}
.belgeBolum h2{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;
  font:900 24px/1.2 var(--baslik);letter-spacing:-.01em;color:var(--murekkep)}
.belgeBolum h2 span{font:800 13px/1 var(--baslik);letter-spacing:.06em;color:var(--vurgu);flex:none}
.belgeBolum h3{margin:22px 0 8px;font:800 16px/1.35 var(--baslik);color:var(--murekkep)}
.belgeBolum p{margin:0 0 14px;font:400 16.5px/1.72 var(--govde);color:#333b44}
.belgeBolum ul{margin:0 0 16px;padding-left:22px}
.belgeBolum li{margin:0 0 9px;font:400 16.5px/1.7 var(--govde);color:#333b44}
.belgeBolum a{color:var(--vurgu2);text-underline-offset:3px}
.belgeAlt{margin-top:10px;padding:26px;border:1px solid var(--ince);border-radius:16px;text-align:center}
.belgeAlt p{margin:0 0 16px;font:400 15.5px/1.6 var(--govde);color:#41494f}
.belgeDugme{display:inline-flex;align-items:center;height:46px;padding:0 24px;background:var(--murekkep);color:#fff;
  text-decoration:none;font:700 13px/1 var(--baslik);letter-spacing:.08em;text-transform:uppercase;border-radius:23px;
  transition:background .2s}
.belgeDugme:hover{background:var(--vurgu)}
@media (max-width:980px){
  .belgeDuzen{grid-template-columns:1fr;gap:0}
  .belgeIcindekiler{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:26px;
    padding-bottom:22px;border-bottom:1px solid var(--ince)}
  .belgeIcBaslik{width:100%;margin-bottom:4px}
  .belgeIcindekiler a{padding:8px 13px;border:1px solid var(--ince);border-radius:18px;font-size:13.5px}
  .belgeIletisim{border-color:var(--vurgu)!important}
}
@media (max-width:560px){
  .belgeUst{padding:30px 0 24px}
  .belgeOzet{font-size:17px}
  .belgeBolum h2{font-size:21px;gap:10px}
  .belgeBolum p,.belgeBolum li{font-size:16px}
  .belgeAlt{padding:20px 16px}
}
/* belge icindekiler: okunan bolum kalin ve vurgulu */
.belgeIcindekiler a.etkin{color:var(--murekkep);font-weight:700;border-left-color:var(--vurgu)}
@media (max-width:980px){ .belgeIcindekiler a.etkin{border-color:var(--vurgu);background:#e4f3f1} }

/* --- Spotify gomusu --- */
.yaziGovde figure.spotify{margin:26px 0;max-width:none}
.yaziGovde figure.spotify iframe{display:block;width:100%;border:0;border-radius:14px;
  box-shadow:0 18px 40px -32px rgba(16,20,27,.8)}
/* Onay yokken oynatici gibi duran, tiklayinca yerinde acilan kart */
.yaziGovde figure.spotify:not(.acik) a{position:relative;display:flex;align-items:center;gap:14px;
  min-height:96px;padding:0 70px 0 18px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#191414,#1f2b22 55%,#14301f);
  text-decoration:none;color:#fff;font:700 14px/1.35 var(--baslik);letter-spacing:.01em;text-transform:none;
  box-shadow:0 14px 34px -26px rgba(16,20,27,.9);transition:transform .2s,box-shadow .2s}
.yaziGovde figure.spotify:not(.acik) a:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(16,20,27,.95)}
.yaziGovde figure.spotify:not(.acik) a:before{content:'';width:34px;height:34px;flex:none;border-radius:50%;
  background:#1db954 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191414'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.6 14.4a.75.75 0 0 1-1.03.25c-2.82-1.72-6.37-2.11-10.55-1.16a.75.75 0 1 1-.33-1.46c4.56-1.04 8.48-.59 11.65 1.34.35.22.46.68.26 1.03zm1.23-2.77a.94.94 0 0 1-1.29.31c-3.23-1.98-8.15-2.56-11.97-1.4a.94.94 0 1 1-.54-1.8c4.36-1.31 9.78-.67 13.49 1.6.44.27.58.85.31 1.29zm.11-2.89C14.07 8.44 7.9 8.23 4.2 9.35a1.12 1.12 0 1 1-.65-2.15c4.25-1.29 11.07-1.04 15.44 1.55a1.12 1.12 0 1 1-1.15 1.93z'/%3E%3C/svg%3E") center/22px no-repeat}
.yaziGovde figure.spotify:not(.acik) a:after{content:'';position:absolute;right:18px;top:50%;width:38px;height:38px;
  margin-top:-19px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191414'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50%/15px no-repeat}
.yaziGovde figure.spotify:not(.acik) a span{display:block}

/* --- bulten penceresi ---
   Ust bardaki zarf artik sayfayi kaydirmiyor, bu pencereyi aciyor.
   Govdenin dogrudan cocugu oldugu icin hicbir yigin baglamina takilmiyor.
   Panel beyaz: karanlik kutu sayfanin geri kalanindan kopuk duruyordu. */
.bultenKat{position:fixed;inset:0;z-index:270;display:grid;place-items:center;padding:24px;
  background:rgba(16,20,27,.42);opacity:0;transition:opacity .28s ease}
.bultenKat.gor{opacity:1}
.bultenKat[hidden]{display:none!important}
.bultenKat:not(.gor){pointer-events:none}
.bultenPencere{position:relative;width:min(580px,100%);max-height:min(90vh,820px);overflow-y:auto;
  background:#fff;color:var(--murekkep);border-radius:22px;padding:44px 44px 34px;
  box-shadow:0 46px 96px -50px rgba(16,20,27,.75);
  transform:translateY(16px) scale(.985);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.bultenKat.gor .bultenPencere{transform:none}
.bultenKapat{position:absolute;top:18px;right:18px;width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--kagit2);color:#6b7480;cursor:pointer;transition:background .16s,color .16s}
.bultenKapat:hover{background:#e7e9ec;color:var(--murekkep)}
.bultenMarka{display:block;font:700 28px/1 'Stick No Bills',var(--baslik);letter-spacing:-.04em;color:var(--murekkep);margin:0 0 20px}
.bultenMarka b{color:var(--vurgu);font-weight:700}
.bultenPencere h2{font:900 29px/1.2 var(--baslik);letter-spacing:-.02em;color:var(--murekkep);margin:0 0 14px;padding-right:40px}
.bultenGiris{margin:0 0 28px;font:400 15.5px/1.68 var(--sans);color:#4a525c}
/* form bicimleri koyu kutu icin yazilmisti, beyaz panelde yeniden kuruluyor.
   Pencerede her sey bir tik daha genis nefes aliyor. */
.bultenPencere .bultenForm{gap:14px}
.bultenPencere .bultenForm input[type=email]{height:54px;min-width:210px;padding:0 18px;border:1px solid #d7dbe0;
  border-radius:14px;background:#fff;color:var(--murekkep);font:15.5px var(--sans)}
.bultenPencere .bultenForm input[type=email]::placeholder{color:#8b939c}
.bultenPencere .bultenForm input[type=email]:focus{outline:0;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(13,148,136,.16)}
.bultenPencere .bultenForm button{height:54px;padding:0 28px;border-radius:14px;font:600 15.5px var(--sans)}
.bultenPencere .bultenForm .onay{margin-top:4px;gap:11px;font:13px/1.55 var(--sans);color:#5a626b}
.bultenPencere .bultenForm .onay input{width:16px;height:16px;margin-top:1px;flex:none}
.bultenPencere .bultenForm .durum{margin-top:2px;min-height:20px;font:13.5px var(--sans)}
.bultenPencere .bultenForm .durum{color:var(--vurgu2)}
.bultenPencere .bultenForm .durum.kotu{color:#c2462f}
.bultenNe{margin:30px 0 0;padding:24px 0 0;list-style:none;border-top:1px solid var(--ince)}
.bultenNe li{position:relative;margin:0 0 13px;padding-left:27px;font:400 14px/1.55 var(--sans);color:#4a525c}
.bultenNe li:last-child{margin-bottom:0}
.bultenNe li:before{content:'';position:absolute;left:3px;top:7px;width:10px;height:5px;
  border-left:2px solid var(--vurgu);border-bottom:2px solid var(--vurgu);transform:rotate(-45deg)}
.bultenKucuk{margin:22px 0 0;font:400 13px/1.55 var(--sans);color:#7b838d}
.bultenKucuk a{color:#4a525c;text-decoration:underline;text-underline-offset:2px}
.bultenKucuk a:hover{color:var(--vurgu)}
@media (max-width:560px){
  .bultenKat{padding:0;place-items:end stretch}
  .bultenPencere{max-height:94vh;border-radius:22px 22px 0 0;padding:32px 22px 26px}
  .bultenPencere h2{font-size:25px}
  .bultenPencere .bultenForm input[type=email],.bultenPencere .bultenForm button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .bultenKat,.bultenPencere{transition:none} }
/* heworx reklam agi alanlari: reklam gelmezse hic yer kaplamaz */
.reklamAlan{display:flex;justify-content:center}
.reklamAlan:has(ins[data-hwx-bos]){display:none}
.yaziReklam{margin:28px 0 8px}

/* --- ic baglanti ---
   Sozlukten gelen otomatik baglanti. Yazarin kendi koydugu baglantidan
   ayrilsin diye kalin ve ince alt cizgili. */
.yaziGovde a.icBag{font-weight:700;color:inherit;text-decoration:underline;
  text-decoration-color:var(--vurgu);text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color .16s,text-decoration-color .16s}
.yaziGovde a.icBag:hover{color:var(--vurgu2);text-decoration-color:var(--vurgu2)}

/* --- alt baslik alt cizgisi ---
   Baslik ekrana girdiginde altindaki cizgi soldan saga cekiliyor.
   Genislik yerine transform kullaniliyor, boylece tarayici yeniden
   yerlesim yapmadan ciziyor. */
.yaziGovde h2,.yaziGovde h3{position:relative;padding-bottom:10px;width:fit-content;max-width:100%}
.yaziGovde h2:after,.yaziGovde h3:after{content:'';position:absolute;left:0;bottom:0;width:100%;
  height:2px;background:var(--vurgu);transform:scaleX(0);transform-origin:left center;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);transition-delay:.14s}
.yaziGovde h3:after{height:1px;background:var(--ince)}
.yaziGovde h2.ciz:after,.yaziGovde h3.ciz:after{transform:scaleX(1)}
/* betik gelmezse cizgiler yerinde dursun */
html:not(.js) .yaziGovde h2:after,html:not(.js) .yaziGovde h3:after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .yaziGovde h2:after,.yaziGovde h3:after{transition:none;transform:scaleX(1)}
}

/* Kunye cizgisiyle govde arasinda dort ayri bosluk ust uste biniyordu
   (30+6+22+32=90px). Genis sutunda goze batmiyor, telefonda delik gibi
   duruyor. Dar ekranda toplam 40 piksele iniyor. */
@media (max-width:860px){
  .yaziUst{padding-bottom:16px;margin-bottom:0}
  .yaziDuzen{padding-top:6px}
  .yaziGovde{margin-top:18px}
  .yaziMeta{margin-top:18px;padding:14px 0}
}

/* Telefonda kunye satiri iki satira dusuyor ve paylasim dugmeleri sola
   yigiliyordu. Alt satirin tamamini kaplayip esit araliklarla yayiliyorlar. */
@media (max-width:560px){
  .yaziMeta{gap:12px 14px}
  .yaziMeta .yazar{flex:1 1 100%}
  .yaziMeta .paylas{flex:1 1 100%;justify-content:space-between;gap:0}
  .yaziMeta .paylas a,.yaziMeta .paylas button{width:42px;height:42px}
}

/* --- govdenin ilk harfi ---
   Ilk tasarimda (ofis okuma cekmecesi) vardi, tam sayfa portala
   tasinmamisti. Govdenin ilk paragrafina uygulanir: yazi ara baslikla
   ya da gorselle basliyorsa harf ondan sonraki ilk paragrafa duser. */
.yaziGovde > p:first-of-type::first-letter{
  float:left;font:800 3.6em/.82 var(--baslik);color:var(--vurgu);
  margin:.06em .08em 0 0;letter-spacing:-.02em}
@media (max-width:560px){ .yaziGovde > p:first-of-type::first-letter{font-size:3.2em} }
/* kapak gorseli kunye sutunuyla ayni yuksekligi bulsun */
.yaziUst .yaziKapak img{aspect-ratio:4/3;object-fit:cover;object-position:center var(--konum,50%)}
@media (max-width:1080px){
  .yaziUst .yaziKapak{margin:0}
  .yaziUst .yaziKapak img{aspect-ratio:3/2}
}

/* Tepki, etiketler, reklam ve yazar kutusu alt alta sikismisti.
   Govde sonundaki bloklar birbirinden ayriliyor. */
.yaziAna > .hwx-reklam,.yaziAna ins.hwx-reklam{display:block;margin:40px 0}
.etiketSatir + .yazarKutu{margin-top:40px}
@media (max-width:860px){
  .tepki{margin-top:40px;padding:28px 0 26px}
  .etiketSatir{margin-top:32px}
  .yazarKutu{margin-top:36px}
}

/* --- yapay zeka editoru etiketi ---
   Portreler fotograf gibi oldugu icin imzanin yaninda acik bir isaret
   duruyor. Okur kimin yazdigini yanlis anlamasin. */
.yapayEtiket{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--kagit2);border:1px solid var(--ince);
  font:600 10.5px/1.5 var(--sans);letter-spacing:.04em;color:#6b7480;font-style:normal;
  vertical-align:2px;white-space:nowrap}
.yazarKutu .yapayEtiket{vertical-align:3px}
.yapayNot{margin:8px 0 0!important;font:12.5px/1.55 var(--sans)!important;color:#7b838d!important}
@media (max-width:560px){ .yapayEtiket{margin-left:6px;font-size:10px;padding:2px 7px} }


/* --- ekip sayfasi ---
   Portreler gercek fotograf, sayfanin merkezinde onlar var. Kareler
   buyuk ve tam kare: 512 piksellik uretimin kadraji boyle korunuyor. */
.ekipUst{position:relative;padding:44px 0 0;background:linear-gradient(180deg,var(--kagit2) 0%,var(--kagit2) 62%,var(--kagit) 62%)}
.ekipUstIc{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:end}
.ekipUstYazi{padding-bottom:52px}
.ekipEtiket{margin:0 0 10px;font:800 12px/1 var(--baslik);letter-spacing:.14em;text-transform:uppercase;color:var(--vurgu)}
.ekipUstYazi h1{font-size:clamp(48px,6.4vw,92px);line-height:.94;letter-spacing:-.035em;margin:0}
.ekipGiris{margin:20px 0 0;font:400 18px/1.62 var(--sans);color:#3c444e;max-width:46ch}
.ekipSayi{margin:22px 0 0;font:400 14px/1 var(--sans);color:var(--gri);letter-spacing:.02em}
.ekipSayi b{font:800 14px/1 var(--baslik);color:var(--murekkep)}

/* yonetmen karesi: yazi kapaklarindaki kesik kose motifi */
.ekipYonetmen{--kes:34px;position:relative;margin:0;padding:6px;background:var(--vurgu);
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes));
  box-shadow:0 34px 70px -46px rgba(16,20,27,.9)}
.ekipYonetmen img{--kes:29px;display:block;width:100%;aspect-ratio:1;object-fit:cover;
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes))}
.ekipYonetmen figcaption{position:absolute;left:0;right:0;bottom:6px;padding:20px 22px 16px;
  background:linear-gradient(180deg,rgba(16,20,27,0) 0%,rgba(16,20,27,.82) 58%);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.ekipYonetmen figcaption b{display:block;font:900 26px/1.1 var(--baslik);letter-spacing:-.02em}
.ekipYonetmen figcaption span{display:block;margin-top:5px;font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8fe0d4}
.ekipYonetmenBio{padding:26px 0 0}
.ekipYonetmenBio p{margin:0;font:400 17px/1.7 var(--sans);color:#4a525c;max-width:68ch}

.ekipKap{padding:52px 0 76px}
.ekipBolum{margin:0 0 26px;font:900 14px/1 var(--baslik);letter-spacing:.12em;text-transform:uppercase;
  color:var(--murekkep);display:flex;align-items:center;gap:16px}
.ekipBolum span{flex:none}
.ekipBolum:after{content:'';flex:1;height:2px;background:var(--ince)}

.ekipIzgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
.ekipKaro{min-width:0}
/* yazi kapaklarindaki kesik kose cercevesi burada da: teal zemin dis
   kirpma, gorsel ic kirpma. Dis kirpma buyume animasyonunu da sinirliyor. */
.ekipGorsel{--kes:24px;position:relative;aspect-ratio:1;padding:4px;background:var(--vurgu);
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes))}
.ekipGorsel img{display:block;width:100%;height:100%;object-fit:cover;--kes:20px;
  clip-path:polygon(var(--kes) 0,100% 0,100% calc(100% - var(--kes)),calc(100% - var(--kes)) 100%,0 100%,0 var(--kes));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s ease}
.ekipKaro:hover .ekipGorsel img{transform:scale(1.045);filter:brightness(.62)}
/* bilgi metni karonun uzerine geliyor, dokunmatikte alttaki kopya kaliyor */
.ekipUstMetin{position:absolute;inset:auto 4px 4px;margin:0;padding:20px 18px 22px;
  font:400 14px/1.62 var(--sans);color:#fff;
  background:linear-gradient(180deg,rgba(16,20,27,0) 0%,rgba(16,20,27,.9) 42%);
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .32s cubic-bezier(.22,.61,.36,1)}
.ekipKaro:hover .ekipUstMetin{opacity:1;transform:none}
.ekipKaro h3{margin:14px 0 0;font:800 19px/1.2 var(--baslik);letter-spacing:-.015em}
.ekipKaro .ekipTitr{margin:6px 0 0;font:700 11px/1.4 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--vurgu2)}
.ekipAltMetin{display:none;margin:9px 0 0;font:400 14px/1.6 var(--sans);color:#4a525c}
.ekipAlt{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--ince);
  font:400 16px/1.6 var(--sans);color:#6b7480}
.ekipAlt a{color:var(--vurgu2);text-decoration:underline;text-underline-offset:3px}

@media (hover:none){
  .ekipUstMetin{display:none}
  .ekipAltMetin{display:block}
}
@media (max-width:1180px){ .ekipIzgara{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:980px){
  .ekipUstIc{grid-template-columns:1fr;gap:28px;align-items:start}
  .ekipUst{padding-top:30px;background:linear-gradient(180deg,var(--kagit2) 0%,var(--kagit2) 78%,var(--kagit) 78%)}
  .ekipUstYazi{padding-bottom:0}
  .ekipYonetmen{max-width:340px}
}
@media (max-width:680px){
  .ekipIzgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .ekipGorsel{--kes:18px}
  .ekipGorsel img{--kes:15px}
  .ekipKap{padding:36px 0 56px}
  .ekipKaro h3{font-size:17px}
  .ekipAltMetin{font-size:13.5px}
  .ekipYonetmenBio p{font-size:16px}
}
/* imzadaki ad ekip sayfasindaki karta gider */
.imzaBag{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .16s,color .16s}
.imzaBag:hover{color:var(--vurgu2);border-bottom-color:var(--vurgu)}
.ekipKaro{scroll-margin-top:110px}
.ekipKaro:target .ekipGorsel{box-shadow:0 0 0 4px rgba(13,148,136,.28)}
.kunyeBag{margin:18px 0 0}
.kunyeBag a{font:700 15px var(--sans);color:var(--vurgu2);text-decoration:underline;text-underline-offset:3px}
.kunyeBag a:hover{color:var(--vurgu)}

/* Ekip ust bandinin fonu: ofisin izometrik sahnesi, cok silik.
   Sayfanin kendi zemini zaten acik gri, sahne onun uzerine dusuk
   opaklikla biniyor ve asagi dogru soneriyor. */
.ekipUst:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/blog/medya/ekip-ofis.jpg') center 38%/cover no-repeat;
  opacity:.17;filter:saturate(.7);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.45) 72%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.45) 72%,transparent 96%)}
.ekipUstIc{position:relative;z-index:1}
@media (max-width:680px){ .ekipUst:before{opacity:.13;background-position:center 30%} }
.ekipYonetmen{scroll-margin-top:120px}
.ekipYonetmen:target{box-shadow:0 0 0 5px rgba(13,148,136,.3),0 34px 70px -46px rgba(16,20,27,.9)}
.ekipPuan{margin:7px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--gri)}
.ekipPuan b{font:800 12.5px/1 var(--baslik);color:var(--vurgu2)}

/* --- sonsuz kaydirma --- */
.sonrakiAyrac{position:relative;margin:64px 0 8px;text-align:center}
.sonrakiAyrac:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ince)}
.sonrakiAyrac span{position:relative;display:inline-block;padding:0 18px;background:var(--kagit);
  font:800 11.5px/1 var(--baslik);letter-spacing:.16em;text-transform:uppercase;color:var(--gri)}
.sonrakiNobet{height:8px}
.sonrakiNobet.yukleniyor{height:64px;display:grid;place-items:center}
.sonrakiNobet.yukleniyor:after{content:'';width:26px;height:26px;border-radius:50%;
  border:2px solid var(--ince);border-top-color:var(--vurgu);animation:nobetDon .8s linear infinite}
@keyframes nobetDon{to{transform:rotate(360deg)}}
.sonrakiNobet.bitti{height:0}
.sonrakiNobet.bitti:after{display:none}
@media (prefers-reduced-motion:reduce){ .sonrakiNobet.yukleniyor:after{animation:none} }