/* ohafalan · Yemek
   Haber sitesinden ayri bir kimlik: sicak bir yemek dergisi.
   Krem kagit, espresso murekkep, domates, zeytin, hardal. Fraunces + DM Sans. */
:root{
  --kagit:#F6EFE3; --kagit2:#EFE5D3; --kart:#FFFBF4; --murekkep:#2A1E17; --gri:#7A6A5C; --ince:#E3D6C2;
  --domates:#C8452B; --domates2:#A63722; --zeytin:#5F6B34; --hardal:#E0A43A; --sari:#FCFB06;
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --kap:1240px; --g:clamp(16px,3vw,40px); --yuvar:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kagit);color:var(--murekkep);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;margin:0;font-variation-settings:'opsz' 96}
.yKap{width:min(var(--kap),100%);margin:0 auto;padding:0 var(--g)}
.yAtla{position:absolute;left:-999px}.yAtla:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
.yUstYazi{margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--domates)}
.yUstYazi a{text-decoration:none}
.yUstYazi a:hover{text-decoration:underline}

/* ust bant */
.yUst{position:sticky;top:0;z-index:20;background:rgba(246,239,227,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ince)}
.yUstIc{display:flex;align-items:center;gap:24px;height:78px}
.yMarka{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.yMarka img{height:46px;width:auto}
.yMarka span{font:italic 700 32px/1 var(--serif);color:var(--domates);letter-spacing:-.01em;transform:translateY(2px)}
.yMenu{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.yMenu::-webkit-scrollbar{display:none}
.yMenu a{flex:none;padding:8px 12px;border-radius:999px;text-decoration:none;font:500 14.5px/1 var(--sans);color:var(--murekkep);white-space:nowrap}
.yMenu a:hover{background:var(--kagit2)}
.yMenu a[aria-current]{background:var(--murekkep);color:var(--kagit)}
.yHaber{flex:none;display:flex;align-items:center;gap:6px;font:600 14px/1 var(--sans);text-decoration:none;color:var(--gri)}
.yHaber:hover{color:var(--murekkep)}
@media (max-width:860px){
  .yUstIc{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;gap:8px 16px}
  .yMenu{order:3;flex:1 0 100%;margin:0 calc(var(--g) * -1);padding:0 var(--g)}
  .yHaber{margin-left:auto}
}

.yDugme{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--domates);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;transition:background .2s,transform .15s}
.yDugme:hover{background:var(--domates2)}
.yDugme:active{transform:scale(.97)}
.yDugme.yIkincil{background:transparent;color:var(--murekkep);box-shadow:inset 0 0 0 1.5px var(--murekkep)}
.yDugme.yIkincil:hover{background:var(--murekkep);color:var(--kagit)}

/* ana sayfa girisi */
.yGiris{padding:clamp(28px,5vw,64px) 0 clamp(28px,4vw,48px)}
.yGirisIc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.yGiris h1{margin:14px 0 0;font-size:clamp(46px,7vw,96px);line-height:.95;font-weight:600;letter-spacing:-.03em;font-variation-settings:'opsz' 144}
.yGiris h1 em{font-style:italic;font-weight:500;color:var(--domates)}
.yGirisAlt{margin:18px 0 0;max-width:34ch;font-size:19px;color:#4b3c30}
.yAra{position:relative;display:flex;align-items:center;margin-top:28px;max-width:520px}
.yAra svg{position:absolute;left:18px;color:var(--gri);pointer-events:none}
.yAra input{width:100%;height:58px;padding:0 20px 0 52px;border:1.5px solid var(--murekkep);border-radius:999px;background:var(--kart);
  font:500 16px var(--sans);color:var(--murekkep);outline:none;box-shadow:4px 4px 0 var(--hardal)}
.yAra input:focus{box-shadow:4px 4px 0 var(--domates)}
.yAraSonuc{max-width:520px;margin-top:12px;background:var(--kart);border:1px solid var(--ince);border-radius:16px;overflow:hidden}
.yAraSonuc a{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;border-top:1px solid var(--ince)}
.yAraSonuc a:first-child{border-top:0}
.yAraSonuc a:hover{background:var(--kagit2)}
.yAraSonuc img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.yAraSonuc b{display:block;font:600 16px/1.2 var(--serif)}
.yAraSonuc small{color:var(--gri);font-size:13px}
.yAraSonuc p{margin:0;padding:14px;color:var(--gri)}
.yGunun{position:relative;display:block;text-decoration:none;color:#fff;border-radius:28px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 30px 60px -30px rgba(42,30,23,.55);transform:rotate(1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.yGunun:hover{transform:rotate(0) scale(1.01)}
.yGununGorsel,.yGununGorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yGunun:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(30,18,10,.8))}
.yGununEt{position:absolute;top:18px;left:18px;z-index:1;padding:8px 14px;border-radius:999px;background:var(--hardal);color:var(--murekkep);
  font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
.yGununYazi{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
.yGununYazi b{display:block;font:600 clamp(28px,3.2vw,42px)/1.02 var(--serif);letter-spacing:-.02em}
.yGununYazi span{display:block;margin-top:8px;font-size:14px;opacity:.9}
@media (max-width:860px){ .yGirisIc{grid-template-columns:1fr} .yGunun{transform:none} }

/* bolum basliklari */
.yBolumBas{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.yBolumBas h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;letter-spacing:-.02em}
.yBolumBas p{margin:0;color:var(--gri);flex-basis:100%}
.yTumu{font:600 14px/1 var(--sans);color:var(--domates);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}

/* dolapta ne var */
.yDolap{padding-top:24px;padding-bottom:40px}
.yDolapSec{display:flex;flex-wrap:wrap;gap:8px}
.yDolapSec button{padding:9px 14px;border-radius:999px;border:1.5px solid var(--ince);background:var(--kart);cursor:pointer;
  font:500 14.5px/1 var(--sans);color:var(--murekkep);transition:all .15s}
.yDolapSec button:hover{border-color:var(--murekkep)}
.yDolapSec button[aria-pressed="true"]{background:var(--zeytin);border-color:var(--zeytin);color:#fff}
.yDolapSec button[aria-pressed="true"]:before{content:"✓ "}
.yDolapSonuc{margin-top:20px}
.yDolapSonuc .yIzgara{padding:0}
.yDolapSonuc p{margin:0;color:var(--gri)}
.yEsles{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:999px;background:var(--zeytin);color:#fff;font:700 11px/1 var(--sans)}

/* raflar ve kartlar */
.yRaf{padding:28px 0 20px}
.yRaf:nth-of-type(even){background:var(--kagit2)}
.yRafKay{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--g),calc((100vw - var(--kap)) / 2 + var(--g)));scrollbar-width:none;padding-bottom:8px}
.yRafKay::-webkit-scrollbar{display:none}
.yRafIc{display:flex;gap:18px;width:max-content;padding:4px max(var(--g),calc((100vw - var(--kap)) / 2 + var(--g)))}
.yRafIc .yKart{width:clamp(220px,24vw,290px);scroll-snap-align:start}
.yKart{display:flex;flex-direction:column;text-decoration:none;background:var(--kart);border-radius:var(--yuvar);overflow:hidden;
  box-shadow:0 1px 0 var(--ince),0 14px 30px -24px rgba(42,30,23,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.yKart:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--ince),0 22px 40px -24px rgba(42,30,23,.6)}
.yKartGorsel{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--kagit2)}
.yKartGorsel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.33,0,.2,1)}
.yKart:hover .yKartGorsel img{transform:scale(1.05)}
.yKartYazi{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.yKartKat{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--domates)}
.yKart b{font:600 20px/1.15 var(--serif);letter-spacing:-.01em}
.yKartBilgi{display:flex;gap:12px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--gri)}
.yKartBilgi span+span:before{content:"·";margin-right:12px}
.yIzgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;padding-bottom:56px}

/* kategori sayfasi */
.yKatBas{padding-top:clamp(28px,5vw,56px);padding-bottom:28px}
.yKatBas h1{margin-top:10px;font-size:clamp(46px,7vw,92px);line-height:.95;font-weight:600;letter-spacing:-.03em}

/* tarif sayfasi */
.yTarifBas{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.yTarifGorsel{border-radius:28px;overflow:hidden;aspect-ratio:3/2;background:var(--kagit2);box-shadow:0 30px 60px -34px rgba(42,30,23,.6)}
.yTarifGorsel img{width:100%;height:100%;object-fit:cover}
.yTarifKimlik h1{margin:12px 0 0;font-size:clamp(40px,5.2vw,72px);line-height:.98;font-weight:600;letter-spacing:-.03em;font-variation-settings:'opsz' 144}
.yOzet{margin:16px 0 0;font:italic 400 20px/1.5 var(--serif);color:#4b3c30}
.ySureler{display:flex;flex-wrap:wrap;gap:0;margin:24px 0 0;border-top:1px solid var(--ince);border-bottom:1px solid var(--ince)}
.ySureler div{flex:1 1 0;min-width:90px;padding:12px 0;border-left:1px solid var(--ince);padding-left:14px}
.ySureler div:first-child{border-left:0;padding-left:0}
.ySureler dt{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gri)}
.ySureler dd{margin:6px 0 0;font:600 22px/1 var(--serif)}
.yTarifDugmeler{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (max-width:860px){ .yTarifBas{grid-template-columns:1fr} .yTarifGorsel{margin:0 calc(var(--g) * -1);border-radius:0} }

.yTarifGovde{display:grid;grid-template-columns:minmax(280px,.85fr) 1.4fr;gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:48px}
@media (max-width:860px){ .yTarifGovde{grid-template-columns:1fr} }
.yMalzeme{position:sticky;top:88px;background:var(--kart);border-radius:24px;padding:24px;box-shadow:0 1px 0 var(--ince),0 20px 40px -30px rgba(42,30,23,.45)}
@media (max-width:860px){ .yMalzeme{position:static} }
.yMalzemeBas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.yMalzeme h2,.yAdimlar h2{font-size:30px;font-weight:600}
.yMalzeme h3{margin:18px 0 4px;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--zeytin)}
.yPorsiyon{display:flex;align-items:center;gap:8px;padding:4px;border-radius:999px;background:var(--kagit2)}
.yPorsiyon button{width:34px;height:34px;border-radius:50%;border:0;background:var(--kart);cursor:pointer;font:600 20px/1 var(--sans);color:var(--murekkep);
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
.yPorsiyon button:hover{background:var(--murekkep);color:var(--kagit)}
.yPorsiyon output{min-width:20px;text-align:center;font:700 18px/1 var(--serif)}
.yPorsiyon span{font-size:13px;color:var(--gri);margin-right:4px}
.yMalzemeListe{list-style:none;margin:0;padding:0}
.yMalzemeListe li{border-top:1px dashed var(--ince)}
.yMalzemeListe li:first-child{border-top:0}
.yMalzemeListe label{display:flex;gap:12px;align-items:flex-start;padding:11px 0;cursor:pointer}
.yMalzemeListe input{position:absolute;opacity:0}
.yKutu{flex:none;width:22px;height:22px;margin-top:2px;border-radius:7px;border:1.5px solid var(--gri);display:grid;place-items:center;transition:all .15s}
.yMalzemeListe input:checked + .yKutu{background:var(--zeytin);border-color:var(--zeytin)}
.yMalzemeListe input:checked + .yKutu:after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.yMalzemeListe input:focus-visible + .yKutu{outline:2px solid var(--domates);outline-offset:2px}
.yMalzemeMetin{line-height:1.45}
.yMalzemeListe input:checked ~ .yMalzemeMetin{color:var(--gri);text-decoration:line-through;text-decoration-color:rgba(122,106,92,.6)}
.yMiktar{font-weight:700;margin-right:4px}
.yMiktar.degisti{color:var(--domates)}
.yMalzemeMetin i{color:var(--gri);font-style:normal;font-size:15px}
.yNot{margin:14px 0 0;font-size:13px;color:var(--gri)}

.yAdimlar ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:a}
.yAdimlar ol > li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--ince)}
.yAdimlar ol > li:first-child{border-top:0;padding-top:4px}
.yAdimNo{font:italic 600 44px/1 var(--serif);color:var(--domates);font-variation-settings:'opsz' 144}
.yAdimlar ol > li p{margin:4px 0 0;font-size:18px;line-height:1.65}
.ySayac{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--zeytin);
  background:transparent;color:var(--zeytin);font:600 13.5px/1 var(--sans);cursor:pointer;transition:all .15s}
.ySayac:hover,.ySayac.calisiyor{background:var(--zeytin);color:#fff}
.yPuf{margin-top:28px;padding:22px 24px;border-radius:22px;background:var(--hardal);color:var(--murekkep);position:relative}
.yPuf h3{font-size:24px;font-weight:600}
.yPuf ul{margin:10px 0 0;padding-left:20px}
.yPuf li{margin:6px 0}
.yEk{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.yEk div{padding:18px 20px;border-radius:18px;border:1.5px solid var(--ince)}
.yEk h3{font-size:20px;font-weight:600}
.yEk p{margin:6px 0 0;font-size:16px}
@media (max-width:560px){ .yEk{grid-template-columns:1fr} .yAdimlar ol > li{grid-template-columns:40px 1fr;gap:10px} .yAdimNo{font-size:34px} }
.yBenzer{padding-top:8px}

/* sayac bandi */
.ySayacBant{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px)}
.ySayacBant div{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:999px;background:var(--murekkep);color:var(--kagit);
  font:600 15px/1 var(--sans);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.ySayacBant b{font:700 18px/1 var(--serif);font-variant-numeric:tabular-nums}
.ySayacBant button{border:0;background:rgba(255,255,255,.14);color:inherit;border-radius:999px;padding:6px 10px;cursor:pointer;font:600 12px var(--sans)}
.ySayacBant div.bitti{background:var(--domates);animation:titre .5s ease-in-out 4}
@keyframes titre{50%{transform:translateY(-3px)}}

/* pisirme modu */
.yMod{position:fixed;inset:0;z-index:60;background:var(--murekkep);color:var(--kagit);display:flex;flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) var(--g) calc(18px + env(safe-area-inset-bottom))}
.yMod[hidden]{display:none}
.yModUst{display:flex;justify-content:space-between;align-items:center;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hardal)}
.yModKapat{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;cursor:pointer}
.yModAdim{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:820px;margin:0 auto;width:100%}
.yModAdim .no{font:italic 600 clamp(64px,12vw,120px)/1 var(--serif);color:var(--domates)}
.yModAdim p{margin:18px 0 0;font:400 clamp(24px,3.4vw,38px)/1.35 var(--serif)}
.yModAdim .ySayac{border-color:var(--hardal);color:var(--hardal);margin-top:22px;font-size:16px;padding:12px 16px}
.yModAdim .ySayac:hover,.yModAdim .ySayac.calisiyor{background:var(--hardal);color:var(--murekkep)}
.yModAlt{display:flex;justify-content:space-between;gap:12px;max-width:820px;margin:0 auto;width:100%}
.yModAlt .yDugme{flex:1;justify-content:center;padding:18px}
.yModAlt .yIkincil{color:var(--kagit);box-shadow:inset 0 0 0 1.5px var(--kagit)}
body.modAcik{overflow:hidden}

/* bos sayfa */
.yBos{padding:80px var(--g) 120px;text-align:center}
.yBos h1{font-size:clamp(40px,6vw,72px);margin:12px 0}
.yBos p{color:var(--gri)}

/* alt bant */
.yAlt{margin-top:32px;background:var(--murekkep);color:#d9ccb8;padding:40px 0 calc(40px + env(safe-area-inset-bottom))}
.yAltIc{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.yAlt .yMarka img{filter:brightness(1.05)}
.yAlt p{margin:0;font-size:14px;max-width:60ch}
.yAlt nav{display:flex;gap:18px}
.yAlt nav a{text-decoration:none;font-size:14px}
.yAlt nav a:hover{color:#fff}
@media (max-width:860px){ .yAltIc{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .yGunun{transform:none} }

/* yazdirma: yalniz tarif */
@media print{
  .yUst,.yAlt,.yTarifDugmeler,.yBenzer,.ySayac,.yNot,.yPorsiyon button,.ySayacBant,.yMod{display:none!important}
  body{background:#fff;font-size:12pt}
  .yTarifBas{grid-template-columns:1fr 1.4fr;padding:0}
  .yTarifGorsel{box-shadow:none;border-radius:8px}
  .yTarifKimlik h1{font-size:28pt}
  .yTarifGovde{grid-template-columns:1fr 1.6fr}
  .yMalzeme{box-shadow:none;border:1px solid #ccc;position:static}
  .yPuf{background:#f4f0e6}
}

/* Masaustunde raf yana tasmaz: sayfa genisliginde 4 kartlik sira, fazlasi
   "tarifin hepsi" baglantisinda. Mobilde yana kaydirma kalir. */
@media (min-width:861px){
  .yRafKay{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .yRafIc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;width:auto;max-width:var(--kap);margin:0 auto;padding:4px var(--g)}
  .yRafIc .yKart{width:auto}
  .yRafIc .yKart:nth-child(n+5){display:none}
}

@media (max-width:560px){ .yMarka img{height:38px} .yMarka span{font-size:27px} }
.yMalzeme{top:98px}

/* calisan sayac: dugmede kalan sure, rakamlar kaymasin */
.ySayac span{font-variant-numeric:tabular-nums}
.ySayac.bitti{background:var(--domates)!important;border-color:var(--domates)!important;color:#fff!important;animation:titre .5s ease-in-out 6}
/* pisirme modunda alt bant ileri/geri dugmelerinin ustunde dursun */
body.modAcik .ySayacBant{bottom:calc(96px + env(safe-area-inset-bottom))}
body.modAcik .ySayacBant div{background:#4a372b;box-shadow:0 0 0 1px rgba(224,164,58,.45),0 12px 30px -10px rgba(0,0,0,.6)}

/* Mobil ust bant: logo buyuk, satirlar arasi nefes, kategori seridi okunakli */
@media (max-width:860px){
  .yUstIc{padding-top:16px;padding-bottom:12px;gap:14px 16px}
  .yMarka{gap:12px}
  .yMenu{gap:6px;padding-top:2px;padding-bottom:2px}
  .yMenu a{font-size:16.5px;padding:10px 15px}
}
@media (max-width:560px){
  .yMarka img{height:46px}
  .yMarka span{font-size:33px}
}
@media (max-width:380px){
  .yMarka img{height:40px}
  .yMarka span{font-size:29px}
}
/* dar ekranda "Haberler" yazisi logo satirina sigmiyor: yalniz ok, yuvarlak dugme */
@media (max-width:560px){
  .yUstIc{flex-wrap:wrap}
  .yHaber{width:40px;height:40px;justify-content:center;border-radius:50%;border:1.5px solid var(--ince);color:var(--murekkep);margin-left:auto}
  .yHaber span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .yMarka{flex:0 1 auto;min-width:0}
}

/* Arka plan: elle cizilmis gibi mutfak nesneleri, cok silik (desen.svg).
   Ustte sicak bir isik, zemin kagit rengi. Kartlar opak kalir, desen
   aralarda ve bosluklarda sezilir. */
body{background:
  radial-gradient(1200px 520px at 78% -120px,rgba(224,164,58,.16),transparent 70%),
  radial-gradient(900px 480px at -10% 30%,rgba(200,69,43,.06),transparent 70%),
  url('/yemek/desen.svg?v=4') 0 0/420px 420px repeat,
  var(--kagit)}
.yRaf:nth-of-type(even){background:rgba(239,229,211,.62)}
.yUst{background:rgba(246,239,227,.86)}
@media (max-width:560px){ body{background-size:auto,auto,320px 320px,auto} }

/* Masaustu ust bant iki satir: logo ve Haberler ustte, 11 kategori altta ortali.
   Tek satirda kategoriler sigmiyor, sagda kesiliyordu. */
@media (min-width:861px){
  .yUstIc{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:0;row-gap:6px}
  .yMarka{order:1}
  .yHaber{order:2;margin-left:auto}
  .yMenu{order:3;flex:1 0 100%;justify-content:center;flex-wrap:wrap;gap:2px 4px;padding:6px 0 10px;border-top:1px solid var(--ince)}
  .yMenu a{font-size:15px;padding:8px 13px}
  .yMalzeme{top:132px}
}

/* Isaretlenen malzeme: satir fosforlu kalem gibi soldan saga sariyla dolar,
   adin yaninda minik onay belirir. Ustu cizili gri gorunum kalkti. */
.yMalzemeListe li{position:relative}
.yMalzemeListe label{position:relative;isolation:isolate;margin:0 -10px;padding:11px 10px;border-radius:10px}
.yMalzemeListe label:before{content:"";position:absolute;inset:3px 0;z-index:-1;border-radius:9px;
  background:linear-gradient(100deg,rgba(252,251,6,.62),rgba(252,240,80,.5) 70%,rgba(252,251,6,.38));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.yMalzemeListe li.secili label:before{transform:scaleX(1)}
.yMalzemeListe input:checked ~ .yMalzemeMetin{color:var(--murekkep);text-decoration:none}
.yMalzemeMetin:after{content:"";display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-2px;border-radius:50%;
  background:var(--zeytin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1) .25s,opacity .2s .25s}
.yMalzemeListe li.secili .yMalzemeMetin:after{transform:scale(1);opacity:1}
.yMalzemeListe li.sessiz label:before,.yMalzemeListe li.sessiz .yMalzemeMetin:after{transition:none}
@media print{ .yMalzemeListe label:before,.yMalzemeMetin:after{display:none} }

/* Mobil hamburger ve cekmece: kategoriler, altta ana siteye donus */
.yHamburger{display:none}
@media (max-width:560px){
  .yHaber{display:none}
  .yHamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0 11px;
    border:1.5px solid var(--ince);border-radius:50%;background:var(--kart);cursor:pointer}
  .yHamburger span{display:block;height:2px;border-radius:2px;background:var(--murekkep)}
  .yHamburger span:nth-child(2){width:70%}
}
.yCekmeceKat{position:fixed;inset:0;z-index:80;background:rgba(42,30,23,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s}
.yCekmeceKat.acik{opacity:1}
.yCekmece{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(86vw,380px);display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));
  background:var(--kagit) url('/yemek/desen.svg?v=4') 0 0/320px repeat;box-shadow:-20px 0 50px -20px rgba(42,30,23,.45);
  transform:translateX(104%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.yCekmece.acik{transform:none}
.yCekmece[hidden],.yCekmeceKat[hidden]{display:none}
.yCekmeceUst{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.yCekmeceBaslik{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--domates)}
.yCekmeceKapat{width:44px;height:44px;border-radius:50%;border:0;background:var(--murekkep);color:var(--kagit);font-size:26px;line-height:1;cursor:pointer}
.yCekmece > a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--ince);
  text-decoration:none;font:600 24px/1.1 var(--serif);color:var(--murekkep);letter-spacing:-.01em}
.yCekmece > a i{font:500 13px/1 var(--sans);font-style:normal;color:var(--gri)}
.yCekmece > a[aria-current]{color:var(--domates)}
.yCekmece > a.yCekmeceAna{font-style:italic;color:var(--domates)}
.yCekmece > a.yCekmeceSite{margin-top:auto;padding:16px 18px;border:0;border-radius:18px;background:var(--murekkep);color:var(--kagit);
  align-items:center;font:600 16px/1.2 var(--sans);gap:12px}
.yCekmece > a.yCekmeceSite img{height:26px;width:auto;flex:none;filter:brightness(1.1)}
.yCekmece > a.yCekmeceSite span{flex:1}
.yCekmece > a.yCekmeceSite{box-sizing:border-box}
.yCekmece > a:not(.yCekmeceSite):last-of-type{margin-bottom:24px}
body.cekmeceAcik{overflow:hidden}
@media (max-width:560px){ .yHamburger{display:grid;place-items:center;padding:0;color:var(--murekkep)} }
/* cekmece satirlari biraz siki: "ohafalan.com'a git" kaydirmadan gorunsun */
.yCekmece > a{padding:10px 0;font-size:21px}
.yCekmece > a:not(.yCekmeceSite):last-of-type{margin-bottom:18px}
.yCekmeceUst{margin-bottom:2px}

/* --- maliyet kutusu --- */
.yMaliyet{margin-top:18px;padding:18px;border-radius:18px;background:var(--kagit);border:1.5px solid var(--ince)}
.yMaliyetBas{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.yMaliyetBas h3{font-size:20px;font-weight:600}
.yMaliyetKisi{font-size:13px;color:var(--gri)}
.yMaliyetTutar{margin:6px 0 10px;font:600 38px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.yMaliyetEnUcuz{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed var(--ince);font-size:15px}
.yMaliyetEnUcuz img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px var(--ince)}
.yMaliyetEnUcuz span{flex:1}
.yMaliyetEnUcuzT{font-family:var(--serif);color:var(--zeytin);font-size:18px}
.yMaliyetDus{margin:0;padding-top:8px;border-top:1px dashed var(--ince);font-size:14px;color:var(--zeytin)}
.yMaliyetKaynak{margin:10px 0 0;font-size:12px;color:var(--gri);line-height:1.45}
/* fiyati olan malzemenin adi dokunulabilir */
.yMalzemeListe li.fiyatli .yMalzemeMetin{cursor:pointer;text-decoration:underline dotted rgba(122,106,92,.55);text-underline-offset:4px;text-decoration-thickness:1.5px}
.yMalzemeListe li.fiyatli .yMalzemeMetin:hover{text-decoration-color:var(--domates)}
.yMalzemeListe li.fiyatli label .yMalzemeMetin b{text-decoration:none}

/* --- fiyat penceresi: mobilde alttan, masaustunde ortada --- */
.yFiyatKat{position:fixed;inset:0;z-index:84;background:rgba(42,30,23,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.yFiyatKat.acik{opacity:1}
.yFiyat{position:fixed;left:0;right:0;bottom:0;z-index:85;max-height:86vh;overflow-y:auto;background:var(--kart);
  border-radius:24px 24px 0 0;padding:10px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -20px rgba(42,30,23,.5);
  transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.yFiyat.acik{transform:none}
.yFiyat[hidden],.yFiyatKat[hidden]{display:none}
@media (min-width:700px){
  .yFiyat{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:24px;transform:translate(-50%,-46%);opacity:0;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s}
  .yFiyat.acik{transform:translate(-50%,-50%);opacity:1}
  .yFiyatTut{display:none}
}
.yFiyatTut{width:44px;height:5px;border-radius:9px;background:var(--ince);margin:0 auto 10px}
.yFiyatBas{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.yFiyatBas h3{font-size:24px;font-weight:600;line-height:1.15;padding-top:6px}
.yFiyatKapat{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--murekkep);color:var(--kagit);font-size:24px;line-height:1;cursor:pointer}
.yFiyatAlt{margin:4px 0 8px;font-size:13.5px;color:var(--gri)}
.yFiyatListe{list-style:none;margin:0;padding:0}
.yFiyatListe li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--ince)}
.yFiyatListe li:first-child{border-top:0}
.yFiyatListe img{flex:none;width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px var(--ince);background:#fff}
.yfAd{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.yfAd b{font-size:15.5px}
.yfAd em{font-style:normal;font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--zeytin);padding:4px 7px;border-radius:99px}
.yfAd small{flex-basis:100%;font-size:12.5px;color:var(--gri);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yfTutar{text-align:right;flex:none}
.yfTutar b{display:block;font:600 19px/1.1 var(--serif);font-variant-numeric:tabular-nums}
.yfTutar small{font-size:12px;color:var(--gri)}
.yFiyatListe li:first-child .yfTutar b{color:var(--zeytin)}
.yFiyatDugme{display:flex;gap:10px;margin-top:14px}
.yFiyatDugme .yDugme{flex:1;justify-content:center;padding:15px}
#yFiyatVar{background:var(--zeytin)}
#yFiyatVar:hover{background:#4c5629}
@media print{ .yMaliyet .yMaliyetKaynak{display:block} .yFiyat,.yFiyatKat{display:none!important} }
.yMalzeme .yMaliyet h3{margin:0;font:600 21px/1.1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--murekkep)}
/* masaustu menu tek satir: 11 kategori, alt satira tek oge dusmesin.
   Sigmayan dar ekranda yana kayar. */
@media (min-width:861px){
  .yMenu{flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;gap:0 2px;padding:6px 0 8px;
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
  .yMenu a{font-size:14.5px;padding:8px 11px}
}
@media (min-width:861px) and (max-width:1180px){ .yMenu{justify-content:flex-start} .yMenu a{font-size:14px;padding:8px 9px} }
@media (min-width:1181px){ .yMenu a{padding:8px 9px} }

/* yukari dugmesi: ana sitedekiyle ayni, 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:var(--kart);box-shadow:0 10px 26px -12px rgba(42,30,23,.5);
  display:grid;place-items:center;color:var(--murekkep);transition:background .2s,color .2s}
.yukari:hover .kutu{background:var(--murekkep);color:var(--kagit)}
.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:var(--ince)}
.yukari svg.halka .dolu{stroke:var(--domates);transition:stroke-dashoffset .12s linear,stroke .3s}
.yukari.bitti svg.halka .dolu{stroke:var(--zeytin)}
@media (max-width:560px){ .yukari{right:16px;bottom:16px;width:48px;height:48px} .yukari svg.halka{width:48px;height:48px} }
body.modAcik .yukari,body.cekmeceAcik .yukari{opacity:0;pointer-events:none}
@media print{ .yukari{display:none} }

/* masaustu: ana siteye donus dugmesi, mobil cekmecedeki "ohafalan.com'a git" ile ayni dil */
@media (min-width:561px){
  .yHaber{gap:10px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--murekkep);color:var(--kagit);
    font:600 14.5px/1 var(--sans);box-shadow:0 8px 20px -12px rgba(42,30,23,.6);transition:background .2s,transform .2s}
  .yHaber img{height:22px;width:auto;display:block}
  .yHaber span{padding-left:10px;border-left:1px solid rgba(246,239,227,.25)}
  .yHaber svg{transition:transform .2s}
  .yHaber:hover{background:#000;color:#fff}
  .yHaber:hover svg{transform:translateX(3px)}
}
/* kapat carpisi pencerenin tam sag ust kosesinde */
.yFiyat{position:fixed}
.yFiyatKapat{position:absolute;top:12px;right:12px;width:36px;height:36px;font-size:21px;z-index:2}
.yFiyatBas{padding-right:44px}
@media (max-width:699px){ .yFiyatKapat{top:14px} }

/* --- 404: bos tencere --- 
   Dongu 5 sn: kapak titrer ve kalkar, ic bos gorunur, kucuk bir tas duser,
   tencerenin dibine oturur, kapak kapanir. Hareket azaltma tercihinde durur. */
.yBos{padding:56px var(--g) 110px}
.yBos h1{margin:12px auto 14px;font-size:clamp(46px,7.4vw,96px);line-height:.98;font-weight:600;letter-spacing:-.03em;font-variation-settings:'opsz' 144}
.yBos h1 em{display:block;font-style:italic;font-weight:500;color:var(--domates)}
.yBos > p:not(.yUstYazi){max-width:46ch;margin:0 auto 24px;font-size:18px}
.yTencere{display:block;width:min(300px,70vw);height:auto;margin:0 auto 8px;overflow:visible}
.yTencere *{vector-effect:non-scaling-stroke}
.tGolge{fill:rgba(42,30,23,.10)}
.tDis{fill:#C8452B;stroke:var(--murekkep);stroke-width:3}
.tAgiz{fill:#3a2a21;stroke:var(--murekkep);stroke-width:3}
.tKulp{fill:none;stroke:var(--murekkep);stroke-width:7;stroke-linecap:round}
.tParilti{fill:none;stroke:rgba(255,255,255,.45);stroke-width:5;stroke-linecap:round}
.tKapakGovde{fill:#d9573b;stroke:var(--murekkep);stroke-width:3}
.tKapakUst{fill:#d9573b;stroke:var(--murekkep);stroke-width:3}
.tTutamak{fill:var(--murekkep)}
.tTas path{fill:#8f8478;stroke:var(--murekkep);stroke-width:2.5}
.tKapak{transform-box:view-box;transform-origin:52px 100px}
.tTas{transform-box:view-box;transform:translate(0,-60px);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tKapak{animation:tKapak 5s cubic-bezier(.4,0,.2,1) infinite}
  .tTas{animation:tTas 5s cubic-bezier(.5,0,.8,.4) infinite}
  .tGovde{transform-box:view-box;transform-origin:160px 222px;animation:tGovde 5s ease-in-out infinite}
}
@keyframes tKapak{
  0%,6%{transform:none}
  9%{transform:rotate(-2deg) translateY(-3px)} 12%{transform:rotate(1.5deg)} 15%{transform:rotate(-1deg) translateY(-2px)} 18%{transform:none}
  32%,62%{transform:rotate(-24deg) translate(-6px,-26px)}
  74%{transform:rotate(1.5deg)} 78%{transform:rotate(-.6deg)} 82%,100%{transform:none}
}
@keyframes tTas{
  0%,36%{transform:translate(0,-60px);opacity:0}
  38%{opacity:1}
  50%{transform:translate(0,112px);opacity:1}
  54%{transform:translate(0,98px)} 58%{transform:translate(0,112px)} 60%{transform:translate(0,108px)} 62%{transform:translate(0,112px);opacity:1}
  70%,100%{transform:translate(0,112px);opacity:0}
}
@keyframes tGovde{0%,49%{transform:none}51%{transform:scale(1.015,.985)}55%,100%{transform:none}}