@charset "UTF-8";
/* ohafalan renk katmani
   Tasarim heworx blogunun aynisi. Degisen tek sey marka rengi.
   Sari zeminlerde ve cizgilerde kullaniliyor, metinlerde kullanilamaz
   cunku beyaz uzerinde okunmuyor. Bu yuzden teal'in metin olarak
   kullanildigi butun seciciler murekkebe cekiliyor. */
:root{
  --vurgu:#FCFB06;          /* sari: zemin, cizgi, halka */
  --vurgu2:#1A1618;         /* koyu: metin vurgusu */
  --ohaYazi:#1A1618;
}
.araBolumBas button:hover,
.araEtiket a:hover,
.araRafKart:hover b,
.araSonucOge .kat2,
.belgeBolum a,
.belgeBolum h2 span,
.belgeEtiket,
.bolumUst h2,
.bultenKucuk a:hover,
.bultenMarka b,
.bultenPencere .bultenForm .durum,
.ekipAlt a,
.ekipEtiket,
.ekipKaro .ekipTitr,
.ekipPuan b,
.etiketBulut a:hover,
.etiketSatir a:hover,
.gundemIc a:hover,
.imzaBag:hover,
.kart-yan .kartTarih,
.kart:hover h3 a,
.kat,
.kunyeBag a,
.kunyeBag a:hover,
.lider .liderBaslik a:hover,
.marka b,
.menu a.etkin,
.menu a:hover,
.mobilAna a.etkin,.mobilAna a:active,
.mobilMenu h5,
.ozetKivilcim,
.ozetUst,
.paylasRay .begenDugme.acik .rayAd,
.satir:hover b,
.satirNo,
.sayfalama a:hover,
.tepkiDugme.acik,
.tepkiTesekkur,
.tumu:hover,
.ustEtiket,
.yanBaslik,
.yanKutu h2,
.yaziGovde a,
.yaziGovde a.icBag:hover,
.yaziGovde a:hover,
.yaziGovde figure.hy-ilgili .et,
.yaziGovde figure.hy-ilgiliSatir .ok,
.yol a:hover,
/* --- 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{color:var(--ohaYazi)}

/* sari zeminde beyaz metin okunmaz, murekkebe cevriliyor */
.etiket,.kat,.etiketK,.tepkiDugme.acik,.ozetTur.etkin,.bultenForm button,
.menu a.etkin,.mobilAna a.etkin,.belgeIcindekiler a.etkin,.ekipBolum h2{color:#1A1618 !important}
.bultenForm button:hover{background:#E3E200;color:#1A1618}
/* marka: metin yerine logo */
.marka{display:inline-flex;align-items:center}
.marka span,.marka b,.marka em{display:none}
.marka:before{content:'';display:block;width:300px;height:90px;
  background:url('/oha/logo-480.png') left center/contain no-repeat}
.ust.kucuk .marka:before{width:214px;height:64px}
@media (max-width:860px){
  .ust .marka:before{width:218px;height:66px}
  .ust.kucuk .marka:before{width:168px;height:50px}
}
@media (max-width:560px){
  .ust .marka:before{width:186px;height:56px}
  .ust.kucuk .marka:before{width:146px;height:44px}
}
/* Altbilgi logosu: parilti tasiyan surum. Gorselin kendisi saydam,
   kenarlardaki hafif pus koyu zeminde gorunmuyor, karisim kipine
   gerek yok. */
.alt .marka:before{width:300px;height:94px;background-image:url('/oha/logo-footer-320.png')}
@media (max-width:560px){ .alt .marka:before{width:230px;height:72px} }
/* Serit logonun boyunda kalsin, altinda bos pay birakilmasin. Satir
   yuksekligi her genislikte logonun boyuna gore ayri veriliyor: masaustunde
   serit iki satirli (logo + menu), mobilde tek satirli ve menu gizli.
   Tek bir kural yazilirsa mobilde ikinci satir bos kaliyor ve logonun
   altinda kocaman bir bosluk cikiyor. */
@media (min-width:861px){
  .ustIc{min-height:0;grid-template-rows:104px 44px}
  /* Kuculmus serit 64 pikselde sikisikti: logo, menu ve simgeler kenarlara
     yapisiyordu. Satir bir tik yukseltildi ve ogelere dikey pay verildi. */
  .ust.kucuk .ustIc{grid-template-rows:88px;column-gap:30px}
  .ust .marka,.ust .menu,.ust.kucuk .marka{align-self:center}
  .ust.kucuk .menu{gap:22px}
  .ust.kucuk .ustAraclar{gap:10px}
}
@media (max-width:860px){
  .ustIc{min-height:0;grid-template-rows:74px}
  .ust.kucuk .ustIc{grid-template-rows:58px}
}
@media (max-width:560px){
  .ustIc{grid-template-rows:64px}
  .ust.kucuk .ustIc{grid-template-rows:52px}
}

/* --- bolum basliklari: sari kutu, siyah cerceve, hafif egik ---
   heworx'te ince cizgili sade basliklardi. ohafalan'in dili daha
   yuksek sesli, basliklar da logodaki balonun acisini aliyor. */
.bolumUst h2,.yanBaslik,.yanKutu h2{
  background:var(--vurgu);color:#1A1618 !important;
  border:3px solid #1A1618;border-bottom:3px solid #1A1618;
  padding:8px 14px;transform:rotate(-1.4deg);transform-origin:left center;
  box-shadow:4px 4px 0 #1A1618;display:inline-flex;align-items:center;gap:0}
.bolumUst h2:before,.yanKutu h2:before{display:none}
.yanKutu h2:after{display:none}
/* kutunun yaninda cizgi devam etsin */
.bolumUst{border-bottom:0;padding-bottom:0;gap:18px;align-items:center;margin-bottom:26px}
.bolumUst:after{content:'';position:static;flex:1;order:1;width:auto;height:3px;background:#1A1618}
.bolumUst .tumu{order:2;flex:none}
.yanBaslik{margin:0 0 20px;font-size:20px}
.yanKutu h2{margin-bottom:18px;font-size:14px}
/* baslik yaninda cizgi: yan sutunda da */
.yanBaslik{position:relative}
@media (max-width:560px){
  .bolumUst h2,.yanBaslik,.yanKutu h2{padding:7px 11px;box-shadow:3px 3px 0 #1A1618}
  .bolumUst h2{font-size:19px}
}

/* --- kategori rozetleri: koseli ve sessiz --- */
.kat,.etiketSatir a,.etiketBulut a{border-radius:0}
/* Sari, bir listede yirmi kez tekrarlayinca vurgu olmaktan cikip bagirtiya
   donusuyor. Rozetler sakin kaliyor: koseli bicim ve kalin harf kimligi
   tasimaya yetiyor, sari yalniz bolum basliklarinda ve uzerine gelindiginde
   duruyor. Boylece goz once bolumu, sonra basligi seciyor. */
.kat{background:rgba(26,22,24,.07);border:0;color:#1A1618 !important;
  font-weight:800;letter-spacing:.06em;padding:5px 10px}
.kat:hover{background:var(--vurgu);color:#1A1618 !important}
.etiketSatir a,.etiketBulut a{border:2px solid rgba(26,22,24,.22);color:#1A1618;font-weight:700}
.etiketSatir a:hover,.etiketBulut a:hover{background:var(--vurgu);border-color:#1A1618;color:#1A1618}

/* --- cizgiler ve ince isaretler: sari degil murekkep ---
   Sari (#FCFB06) beyaz uzerinde zemin olarak calisiyor, cizgi olarak
   kayboluyor: 2-3 piksellik bir kural, bir halka ya da bir cerceve
   gorunmuyor. Kural basit tutuldu: sari zemin olur, cizgi olmaz.
   Cizgiler logonun ikinci rengini, murekkebi aliyor. */
:root{ --cizgi:#1A1618; }

/* ust menude etkin/uzerine gelinen baglantinin alti */
.menu a:after{background:var(--cizgi)}
/* yazi icindeki ara basliklarin altina cizilen animasyonlu cizgi */
.yaziGovde h2:after{background:var(--cizgi)}
/* alinti ve not kutularinin sol cizgisi */
.yaziGovde blockquote{border-left-color:var(--cizgi)}
.yaziGovde div.not{border-left-color:var(--cizgi)}
/* klavyeyle gezinme halkasi */
:focus-visible{outline-color:var(--cizgi)}
/* aramada secili satir, etiket ve sayfalama cerceveleri */
.araSonucOge.secili{outline-color:var(--cizgi)}
.araEtiket a:hover{border-color:var(--cizgi)}
.sayfalama a:hover{border-color:var(--cizgi)}
.gecis:hover{border-color:var(--cizgi)}
.ozetPencere{border-color:var(--cizgi)}
.ozetYukleniyor{background:var(--cizgi)}
.bultenForm .onay input{accent-color:var(--cizgi)}

/* Yukari butonunun okuma halkasi: okudukca murekkeple doluyor, yazi
   bitince sariya donuyor. Boylece sari bir sonuc isareti oluyor, surekli
   duran bir cizgi degil. */
.yukari svg.halka .dolu{stroke:var(--cizgi)}
.yukari.bitti svg.halka .dolu{stroke:var(--vurgu)}

/* --- sari zeminde beyaz yazi okunmaz ---
   Bu dugmeler heworx'te koyu teal zeminde beyaz yaziydi. Sari zeminde
   beyaz kayboluyor, yazi ve simge murekkebe cekiliyor. */
.paylas .begenDugme.acik,
.paylasRay .begenDugme.acik i,
.paylasRay .begenDugme:hover i,
.paylasRay .ozetDugme.acik i,
.altSosyal a:hover,
.ozetKisa:hover,.ozetKisa.acik,
.gorunum:hover{color:#1A1618}
.yazarBandi .bantAv{background:var(--cizgi);color:#fff}

/* --- sari zeminli dugmeler: siyah cerceve ---
   Sari daire beyaz sayfada sinirsiz kaliyor, havada duruyor gibi gorunuyor.
   Cerceve logonun kalin siyah konturuyla ayni isi goruyor: sariyi tutuyor. */
.paylas .begenDugme.acik,
.paylasRay .begenDugme.acik i,
.paylasRay .begenDugme:hover i,
.paylasRay .ozetDugme.acik i,
.tepkiDugme.acik,
.ozetTur.etkin,
.ozetKisa:hover,.ozetKisa.acik{border:2px solid #1A1618}

/* --- yazi icindeki ic baglanti ---
   Alti 2 piksel sariyla ciziliyordu, beyaz uzerinde secilmiyordu. Cizgi
   murekkebe alindi; sari uzerine gelindiginde arkaya, fosforlu kalem gibi
   geliyor. Satir yuksekligi degismesin diye yalnizca zemin veriliyor. */
.yaziGovde a.icBag{text-decoration-color:var(--cizgi)}
.yaziGovde a.icBag:hover{background:var(--vurgu);color:#1A1618;
  text-decoration-color:#1A1618;box-shadow:0 0 0 2px var(--vurgu)}

/* --- liste sayfasi basligi: kategori, etiket, arama ---
   Ana sayfada bolum basliklari sari kutuda duruyordu, kategori sayfasinda
   ise duz metindi: ayni sitede iki ayri ses. Baslik ayni aileye alindi.
   Kutu egik durdugu icin ustten ve alttan pay veriliyor, golgenin de yeri
   birakiliyor; yoksa alt cizgiye ve karta degiyor. */
.sayfaBas{padding:20px 0 28px}   /* marka satiri kalkti, baslik yukari alindi */
.sayfaBas h1{display:inline-block;margin:4px 0 6px;
  background:var(--vurgu);color:#1A1618;
  border:3px solid var(--cizgi);box-shadow:5px 5px 0 var(--cizgi);
  padding:8px 16px;transform:rotate(-1.4deg);transform-origin:left center;
  line-height:1.08}
.sayfaBas .ustEtiket{letter-spacing:.18em}
.sayfaBas .sayfaSayi{margin-top:16px}
@media (max-width:560px){
  .sayfaBas{padding:16px 0 22px}
  .sayfaBas h1{padding:7px 12px;box-shadow:4px 4px 0 var(--cizgi)}
}

/* --- mavi: tiklanabilir metnin rengi ---
   Palet ucu isi bolusuyor:
     sari      marka  — logo, bolum basliklari, secili durum (hep zemin)
     murekkep  yapi   — cizgiler, cerceveler, basliklar
     mavi      eylem  — govde icinde tiklanabilen metin
   Mavi, sari ve murekkebin yapamadigi tek isi yapiyor: beyaz uzerinde
   "buraya basilir" diyen bir metin rengi olmak. Gezinme seridi ve
   dugmeler bu kumeye girmiyor; onlar zaten bicimleriyle dugme oldugunu
   soyluyor, bir de renk degistirmelerine gerek yok.
   Renk uydurulmadi, logonun mavi surumunden alindi: #0022FB,
   beyaz uzerinde 8.0:1 okunurluk. */
:root{ --bag:#0022FB; }   /* logonun mavi surumundeki mavi */

.yaziGovde a,
.belgeBolum a,
.kunyeBag a,.kunyeBag a:hover,
.ekipAlt a,
.tumu:hover,
.yol a:hover,
.imzaBag:hover,
.kart:hover h3 a,
.lider .liderBaslik a:hover,
.satir:hover b,
.gundemIc a:hover,
.araRafKart:hover b,
.bultenKucuk a:hover,
.sayfalama a:hover{color:var(--bag)}
.yaziGovde a:hover{color:var(--bag);text-decoration-thickness:2px}
.sayfalama a:hover{border-color:var(--bag)}

/* Ic baglantinin alti da mavi. Uzerine gelindiginde sari fosforlu kalem
   arkaya geliyor, yazi mavi kaliyor: iki renk birbirini bastirmiyor. */
.yaziGovde a.icBag{text-decoration-color:var(--bag)}
.yaziGovde a.icBag:hover{background:var(--vurgu);color:var(--bag);
  text-decoration-color:var(--bag);box-shadow:0 0 0 2px var(--vurgu)}

/* --- kategori renkleri ---
   Renkler logonun kendi varyantlarindan geliyor, uydurulmadi:
     Teknoloji  mavi     #0022FB   (zemin koyu, yazi beyaz — logonun mavi
                                    surumunde de "OHA!" beyazdir)
     Oyun       mercan   #FD403F
     Muzik      pembe    #FC31A7
     Yazilim    nane     #49F6C6
   Genel, Yapay zeka ve Web icin varyant yok, onlar evin rengi sarida
   kaliyor. Ust seritteki logo ve altbilgi her zaman sari: renk kategoriyi
   isaretliyor, markayi degil.

   Renk yalnizca bolum basliklarinda ve kategori sayfasinin basliginda
   doluyor. Karttaki rozet sakin kaliyor, cunku bir listede yirmi kez
   tekrarlayan dolu renk yine bagirtiya donusur; rozet rengini uzerine
   gelindiginde gosteriyor. */
:root{ --k-mavi:#0022FB; --k-mercan:#FD403F; --k-pembe:#FC31A7; --k-nane:#49F6C6; }

.bolumUst[data-kat="Teknoloji"] h2,
.sayfaBas[data-kat="Teknoloji"] h1,
.kat[data-kat="Teknoloji"]:hover{background:var(--k-mavi);color:#fff !important}
/* Mercan ve pembede yazi beyaz. Beyaz bu iki zeminde 3.5:1 veriyor: iri
   ve kalin baslik icin yeterli, kucuk metin icin degil. Bu yuzden karttaki
   rozet ayni renge gelse de yazisi murekkep kaliyor. */
.bolumUst[data-kat="Oyun"] h2,
.sayfaBas[data-kat="Oyun"] h1{background:var(--k-mercan);color:#fff !important}
.kat[data-kat="Oyun"]:hover{background:var(--k-mercan);color:#1A1618 !important}
.bolumUst[data-kat="Müzik"] h2,
.sayfaBas[data-kat="Müzik"] h1{background:var(--k-pembe);color:#fff !important}
.kat[data-kat="Müzik"]:hover{background:var(--k-pembe);color:#1A1618 !important}
.bolumUst[data-kat="Yazılım"] h2,
.sayfaBas[data-kat="Yazılım"] h1,
.kat[data-kat="Yazılım"]:hover{background:var(--k-nane);color:#1A1618 !important}

/* --- yazi sayfasindaki kategori kutusu ---
   Listede rozet sakin duruyor cunku bir sayfada yirmi kez tekrarliyor.
   Yazi sayfasinda ise tek basina ve yazinin hangi bolumde oldugunu soyleyen
   tek isaret: rengini dogrudan tasiyor, uzerine gelmeyi beklemiyor.
   Yazi rengi zemine gore ayri: mavi koyu oldugu icin beyaz, digerlerinde
   murekkep. Rozet metni kucuk, buyuk baslik kutularindaki beyaz burada
   yeterli okunurlugu vermiyor. */
.yaziKat .kat{background:var(--vurgu);border-color:var(--cizgi)}
.yaziKat .kat[data-kat="Teknoloji"]{background:var(--k-mavi);color:#fff !important;border-color:var(--k-mavi)}
.yaziKat .kat[data-kat="Oyun"]{background:var(--k-mercan);color:#1A1618 !important}
.yaziKat .kat[data-kat="Müzik"]{background:var(--k-pembe);color:#1A1618 !important}
.yaziKat .kat[data-kat="Yazılım"]{background:var(--k-nane);color:#1A1618 !important}
.yaziKat .kat:hover{background:#1A1618 !important;color:#fff !important;border-color:#1A1618}

/* --- alinti: sayfadan yukselen bir blok ---
   Ince sol cizgili sakin alinti heworx'un diliydi. Burada alinti yazinin
   icinde duraksatan bir yer olsun istendi: buyuk punto, basliktaki aile ve
   onde kocaman bir tirnak. Tirnak sari, kenari murekkep — sari beyaz
   uzerinde tek basina kaybolurdu, kontur onu tutuyor. */
/* Alinti metni italik ve ince. Baslik ailesinin (Montserrat) italigi ve
   600 altindaki agirliklari sayfaya yuklenmiyor; govde ailesinin gercek
   italigi yuklendi, boylece tarayici egip taklit etmiyor. */
.yaziGovde blockquote{
  position:relative;border-left:0;margin:2.4em 0;padding:6px 0 2px 52px;
  font:italic 400 clamp(19px,2vw,24px)/1.5 var(--govde);
  letter-spacing:0;color:#2c3238}
/* Tirnak sari ve konturluyken cok bagiriyordu, metni yiyordu. Sessiz bir
   isaret olmasi yeterli: soluk murekkep, daha kucuk. */
.yaziGovde blockquote:before{
  content:'\201C';position:absolute;left:0;top:-14px;
  font:900 62px/1 var(--baslik);color:rgba(26,22,24,.20);
  pointer-events:none;user-select:none}
.yaziGovde blockquote p{margin:0 0 .5em}
.yaziGovde blockquote p:last-child{margin-bottom:0}
.yaziGovde blockquote cite{display:block;margin-top:14px;
  font:700 13px/1.4 var(--sans);font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gri)}
@media (max-width:560px){
  .yaziGovde blockquote{padding-left:0;padding-top:34px;margin:2em 0}
  .yaziGovde blockquote:before{font-size:52px;top:-8px}
}
.yaziGovde.ilkHarfYok > p:first-of-type::first-letter{color:inherit}
/* Yemek: ayri tasarimli bolum, menude domates rengi ve italik serif ile ayrisir */
.menu a.menuYemek,.mobilAna a.menuYemek span{color:#C8452B !important;font-family:'Fraunces',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;font-weight:700}
.menu a.menuYemek{font-size:17px}
/* "Yemek" yemek bolumunun logosundaki gibi: domates kirmizisi, italik serif */
.menu a.menuYemek{font-size:20px;letter-spacing:-.01em;line-height:1;padding-top:0;padding-bottom:0;transform:translateY(1px)}
.menu a.menuYemek:hover,.mobilAna a.menuYemek:hover span{color:#A63722 !important}
.mobilAna a.menuYemek span{font-size:1.15em}
footer.alt .altSutun a.altYemek{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;font-size:18px;color:#E06A4E}
footer.alt .altSutun a.altYemek:hover{color:#fff}
/* Yemek: daha buyuk, buyuk harfli menu basliklarinin ortasina hizali */
.menu a.menuYemek{font-size:25px !important;line-height:1;padding:0 2px;transform:translateY(-1px);align-self:center}
.ust.kucuk .menu a.menuYemek{font-size:21px !important}
.menu a.menuYemek:after{display:none}