/* Op. Dr. Emre Aygün — site stilleri (tasarım dosyasından) */
/* =========================================================================
Op. Dr. Emre Aygün — Kalp ve Damar Cerrahisi Lacivert · pirinç · beyaz
========================================================================= */
:root{
/* Marka paleti — Altın #C2A059 · Koyu altın #8A6F37 · Antrasit #171719 · Beyaz
⚠ Parlak altın beyaz zeminde yazı olarak okunmaz (2,3:1). Bu yüzden yazı ve
dolgu KOYU altını (#8A6F37, beyazla 4,7:1), ikon/ayraç/koyu zemin vurgusu
ise parlak altını (--gold-l) kullanır. */
--navy:#171719; --navy-d:#0f0f11; --navy-l:#26262a; --navy-g:linear-gradient(135deg,#2c2c31 0%,#171719 58%,#0f0f11 100%);
--gold:#8a6f37; --gold-fill:#8a6f37; --gold-l:#c2a059; --gold-w:#f7f1e3;
--paper:#fff; --mist:#f7f5f1; --mist-2:#ece7dd;
--ink:#171719; --muted:#5f5d58; --line:#ecebe7; --line-d:#d9d6ce;
--rs:10px; --r:16px; --rl:24px; --pill:999px;
--gut:clamp(18px,4vw,48px); --max:1280px;
--sh-s:0 1px 2px rgba(10,10,14,.05), 0 8px 20px -14px rgba(10,10,14,.3);
--sh:0 2px 6px rgba(10,10,14,.06), 0 26px 50px -30px rgba(10,10,14,.45);
--sh-l:0 4px 10px rgba(10,10,14,.07), 0 44px 80px -40px rgba(10,10,14,.55);
}
:root{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;font-size:16.5px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(54px,7vw,102px)}
.sec.mist{background:var(--mist)}
.sec.dark{
background:var(--navy-d);
--paper:#141419; --mist:#141419; --mist-2:#1f1f26;
--ink:#ffffff; --muted:#cdcdd5;
--line:rgba(255,255,255,.15); --line-d:rgba(255,255,255,.26);
--gold:var(--gold-l); --gold-fill:var(--gold-l);
color:#fff;
}
.sec.dark .head h2,.sec.dark h3{color:#fff}
.sec.dark .head p{color:#cdcdd5}
.sec.dark .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.sec.dark .btn-ghost:hover{border-color:var(--gold-l);color:var(--gold-l)}
.sec.dark .btn-gold{background:var(--gold-fill);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--gold);margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold-fill);border-radius:2px}
.head{max-width:66ch;margin-bottom:clamp(28px,3.4vw,46px)}
.head h2{font-size:clamp(28px,3.8vw,46px)}
.head p{margin-top:15px;color:var(--muted);font-size:17.2px}
.head-row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(26px,3.2vw,42px)}
.head-row .head{margin-bottom:0}
.head-row .seeall{flex:none;padding:12px 22px;margin-bottom:2px}
@media (max-width:600px){.head-row{align-items:flex-start}.head-row .seeall{margin-bottom:0}}
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:14px 26px;border-radius:var(--pill);font-size:15px;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s}
.btn-gold{background:var(--gold-fill);color:#fff}
.btn-gold:hover{background:#b01d00;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-l);transform:translateY(-2px)}
.btn-out{border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(4px)}
.btn-out:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-d);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn svg{flex:none;transition:transform .2s}
.btn:hover svg:last-child{transform:translateX(3px)}
.btn svg:first-child{opacity:.85}
.btn:hover svg:first-child{opacity:1}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 6% cover 25%}
@keyframes rv{from{opacity:.5;transform:translateY(26px)}to{opacity:1;transform:none}}
}
}
/* ================= üst şerit ================= */
.topline{background:var(--navy-d);color:#c6bab7;font-size:13.5px}
.topline .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;justify-content:space-between;padding-block:9px}
.topline a{color:#f6f6f8;text-decoration:none;transition:color .18s}
.topline a:hover{color:var(--gold-l)}
.topline .soc{display:flex;gap:12px;align-items:center;white-space:nowrap;flex:none}
.topline .soc a.si{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--pill);transition:background .2s}
.topline .soc a.si:hover{background:rgba(255,255,255,.12)}
.topline .soc .tel{font-weight:600;margin-right:4px}
/* Mobilde üst şeritte yalnız telefon kalır ve ortalanır; duyuru/adres metni ile
sosyal simgeler dar ekranda iki satıra taşıp şeridi şişiriyordu. */
@media (max-width:760px){
.topline .wrap{justify-content:center;gap:0;padding-block:8px}
.topline .wrap > span:not(.soc){display:none}
.topline .soc{gap:10px}
.topline .soc .si{display:none}
.topline .soc .tel{margin:0;font-size:14.4px;letter-spacing:.01em}
}
/* ================= menü + mega ================= */
/* ⚠ backdrop-filter, altındaki mega paneli de yarı saydam gösteriyordu
(arkadaki hero görseli menünün içinden okunuyordu) → düz beyaz zemin. */
.nav{position:sticky;top:0;z-index:200;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.stuck{box-shadow:0 14px 34px -26px rgba(10,10,14,.6)}
/* Menü sayfanın tam ortasında dursun: yanlardaki iki sütun eşit (1fr),
ortadaki sütun içeriği kadar. Esnek kutuda menü, marka ile düğme
arasındaki ARTAN boşluğa ortalanıyordu; ikisi farklı genişlikte olduğu
için menü sayfaya göre kayıyordu. */
/* Logo ile randevu dugmesi sabit genislikte oldugu icin menu, iki yanindaki
bosluk esit kalacak bicimde yerlesir: space-between arta kalan yeri iki
esit parcaya boler. (Onceki izgara duzeni menuyu kabin ortasina aliyordu;
logo genisledikce sol bosluk sagdakinin yarisina dusuyordu.) */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
gap:clamp(8px,1.2vw,18px);padding-block:12px}
.brand{justify-self:start}
.navcta{justify-self:end}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex:none;padding-right:clamp(10px,2vw,28px)}
.brand .em{width:44px;height:44px;flex:none;background:var(--navy-g);color:#fff;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:15px}
.brand .nm{display:block;font-size:15.8px;font-weight:700;white-space:nowrap;line-height:1.2}
.brand .sb{display:block;font-size:12.5px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Logo görseli marka yazısının yerini alır: yükseklik sabit, genişlik oranla
gelir. Logonun içinde ad ve unvan zaten yazılı olduğu için yanına metin
eklenmez. */
.brand-gorsel{gap:0;padding-right:0}
.brand-gorsel img{display:block;height:56px;width:auto;max-width:100%;aspect-ratio:832/149}
.menu{display:flex;justify-self:center;justify-content:center;align-items:center;gap:clamp(3px,.5vw,9px);list-style:none;margin:0;padding:0}
/* Cekmecenin alt blogundaki dugmeler bu duz menu bagi bicimini almaz. */
.menu > li:not(.menu-alt) > a,.mtrigger{
display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:15.6px;font-weight:500;
padding:10px 14px;border-radius:var(--pill);white-space:nowrap;border:0;background:transparent;color:inherit;cursor:pointer;
transition:background .2s,color .2s;
}
.menu > li:not(.menu-alt) > a:hover,.mtrigger:hover{background:var(--mist-2);color:var(--gold)}
.mtrigger svg{transition:transform .25s}
.has-mega[data-open="1"] .mtrigger{background:var(--mist-2);color:var(--gold)}
.has-mega[data-open="1"] .mtrigger svg{transform:rotate(180deg)}
.mega{
position:absolute;left:0;right:0;top:100%;z-index:120;
background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
box-shadow:var(--sh-l);
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .26s ease,transform .26s ease,visibility .26s;
}
.has-mega[data-open="1"] > .mega{opacity:1;visibility:visible;transform:none}
@media (min-width:1241px){ .has-mega:hover > .mega,.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:none} }
.mega-in{max-width:var(--max);margin-inline:auto;padding:clamp(20px,2.4vw,32px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(18px,2.4vw,36px)}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:6px}
.mcols a{display:flex;gap:13px;padding:12px;border-radius:var(--rs);text-decoration:none;transition:background .2s,transform .2s}
.mcols a:hover{background:var(--mist);transform:translateX(3px)}
.mcols .ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--gold-w);color:var(--gold);display:grid;place-items:center}
.mcols b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.mcols span{display:block;font-size:13.2px;color:var(--muted);line-height:1.42}
.mgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px 22px}
.mgroups.mg2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 30px}
.mgroups.mg2 h4{font-size:13.5px;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:10px}
@media (max-width:900px){.mgroups.mg2{grid-template-columns:1fr}}
.mgroups h4{font-size:12.5px;color:var(--gold);font-weight:700;margin-bottom:8px}
.mgroups ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.mgroups a{display:block;font-size:14.2px;text-decoration:none;color:var(--muted);padding:5px 8px;border-radius:8px;transition:background .18s,color .18s}
.mgroups a:hover{background:var(--mist);color:var(--ink)}
.mfeat{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;min-height:200px;display:flex;align-items:flex-end;background:var(--navy-d)}
.mfeat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mfeat:hover img{transform:scale(1.06)}
.mfeat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.15),rgba(10,10,14,.9))}
.mfeat .fi{position:relative;z-index:2;padding:18px}
.mfeat .fk{font-size:12.5px;color:var(--gold-l);font-weight:600}
.mfeat b{display:block;font-size:18px;font-weight:600;margin-top:3px}
.mfeat span{display:block;font-size:13.4px;color:#d8cecb;margin-top:5px}
.burger{display:none;width:44px;height:40px;border:1px solid var(--line-d);background:var(--paper);border-radius:var(--rs);cursor:pointer;padding:0;place-items:center;color:var(--ink)}
.burger i{display:block;width:17px;height:1.8px;background:currentColor;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.8px;background:currentColor;transition:transform .25s,top .25s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
/* ================= hero ================= */
.hero{position:relative;background:var(--navy-d);color:#fff;overflow:hidden;
min-height:clamp(620px,86vh,880px);display:flex;align-items:center}
.hero-img{position:absolute;inset:0;overflow:hidden}
.hbg{position:absolute;inset:0;opacity:0;transition:opacity 1.05s cubic-bezier(.4,0,.2,1)}
.hbg.on{opacity:1}
.hbg img{width:100%;height:100%;object-fit:cover;transform:scale(1.13);transition:transform 9s linear}
.hbg.on img{transform:scale(1)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,11,.86) 0%,rgba(8,8,11,.62) 42%,rgba(8,8,11,.26) 72%,rgba(8,8,11,.08) 100%)}
@media (max-width:820px){.hero{min-height:clamp(560px,76vh,760px)}.hero-img::after{background:linear-gradient(180deg,rgba(10,10,14,.42) 0%,rgba(10,10,14,.58) 55%,rgba(10,10,14,.72) 100%)}}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(56px,6vw,96px) clamp(86px,8.4vw,132px)}
.namecard{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:10px 20px 10px 12px;border-radius:var(--pill);backdrop-filter:blur(6px)}
.namecard .ph{width:44px;height:44px;flex:none;background:var(--gold);color:#fff;display:grid;place-items:center;border-radius:var(--pill);font-weight:700;font-size:15px}
.namecard .nm{font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.2}
.namecard .sb{display:block;font-size:13px;color:#bdbdc8;font-weight:400}
.hcard{
position:relative;max-width:min(960px,100%);
background:rgba(26,18,17,.62);
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(255,255,255,.15);border-radius:18px;
padding:clamp(20px,2.4vw,30px);
box-shadow:0 34px 64px -42px rgba(0,0,0,.85);
}
@supports not (backdrop-filter: blur(4px)){ .hcard{background:rgba(26,18,17,.86)} }
.hslides{position:relative;display:grid;align-items:start;max-width:100%}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none}
.hslide.on{opacity:1;visibility:visible;pointer-events:auto}
.hslides.anim .hslide.on .tag{animation:hRise .62s .05s cubic-bezier(.22,1,.36,1) both}
.hslides.anim .hslide.on h1,.hslides.anim .hslide.on .hbaslik{animation:hMask .85s .16s cubic-bezier(.22,1,.36,1) both}
.hslides.anim .hslide.on p{animation:hRise .72s .3s cubic-bezier(.22,1,.36,1) both}
.hslides.anim .hslide.on .hacts{animation:hRise .72s .42s cubic-bezier(.22,1,.36,1) both}
@keyframes hRise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hMask{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(20px)}to{opacity:1;clip-path:inset(0 0 -12% 0);transform:none}}
@media (prefers-reduced-motion:reduce){
.hslides.anim .hslide.on .tag,.hslides.anim .hslide.on h1,.hslides.anim .hslide.on .hbaslik,.hslides.anim .hslide.on p,.hslides.anim .hslide.on .hacts{animation:none}
.hbg img,.hbg.on img{transform:none;transition:none}
}
.hslide .tag{display:inline-block;font-size:12.6px;font-weight:600;color:var(--gold-l);margin-bottom:10px;padding:4px 12px;border:1px solid rgba(194,160,89,.45);border-radius:var(--pill)}
/* Ilk slayt H1, digerleri .hbaslik; gorunum birebir ayni kalir. */
.hslide h1,.hslide .hbaslik{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.1;color:#fff;max-width:24ch}
.hslide h1 .hl{color:var(--gold-l)}
.hslide p{margin-top:13px;font-size:clamp(14.6px,1.35vw,16.4px);color:#ddd3d0;max-width:64ch;line-height:1.6}
.hnav{display:flex;align-items:center;gap:16px;margin-top:20px}
.hdots{display:flex;gap:8px}
.hdots button{position:relative;overflow:hidden;width:30px;height:4px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;border-radius:var(--pill);transition:width .3s cubic-bezier(.22,1,.36,1)}
.hdots button[aria-current="true"]{width:54px;background:rgba(194,160,89,.4)}
.hdots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--gold-l);transform:scaleX(1);transform-origin:left}
.hdots.run button[aria-current="true"]::after{animation:dotFill 7s linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.harrows{display:flex;gap:8px}
.harrows button{width:38px;height:38px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;border-radius:var(--pill);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s;backdrop-filter:blur(4px)}
.harrows button:hover{background:rgba(255,255,255,.18);border-color:#fff}
.hacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* Dar ekranda iki dugme alt alta dusuyordu; sarma kapatilip esit paya
bolunurler, yazi ve ic bosluk sigacak olcude kucultulur. */
@media (max-width:620px){
.hacts{flex-wrap:nowrap;gap:8px}
.hacts > .btn{flex:1 1 0;min-width:0;justify-content:center;
padding:11px 9px;font-size:13.2px;gap:6px;white-space:nowrap}
.hacts > .btn svg{width:15px;height:15px;flex:none}
}
@media (max-width:380px){
.hacts > .btn{padding:10px 7px;font-size:12.4px;gap:5px}
.hacts > .btn svg{display:none}
}
/* --- mobilde hero ortali ---
Telefonda hero metni sol kenara yaslandiginda dar sutunda dengesiz
duruyordu; etiket, baslik, aciklama ve dugmeler ortaya alinir. Hem
anasayfa slaytlari (.hslide) hem ic sayfa basligi (.pg-hero) icin. */
@media (max-width:760px){
.hslide,.pg-hero .wrap{text-align:center}
.hslide .tag,.hslide h1,.hslide .hbaslik,.hslide p{margin-left:auto;margin-right:auto}
.hslide h1,.hslide .hbaslik,.hslide p{max-width:100%}
.hacts{justify-content:center}
.pg-hero .wrap > *{margin-left:auto;margin-right:auto}
.pg-hero .pg-ust{justify-content:center}
.pg-hero h1,.pg-hero p{max-width:100%}
/* "eyebrow" oncesindeki kisa cizgi ortalamada basligi kaydirmasin */
.pg-hero .eyebrow{justify-content:center}
}
/* hızlı kartlar — hero üzerine binen */
.quick{position:relative;z-index:5;margin-top:-43px}
@media (max-width:560px){.quick{margin-top:-30px}}
.quick .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.qi{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:14px;
padding:20px clamp(16px,1.8vw,24px);
background:linear-gradient(180deg,#ffffff 0%,#f8f5f4 100%);
border:1px solid #e8e3e1;border-radius:16px;text-decoration:none;
box-shadow:inset 0 1px 0 #fff,
0 1px 2px rgba(10,10,14,.05),
0 10px 20px -12px rgba(10,10,14,.38),
0 26px 44px -26px rgba(10,10,14,.5);
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.qi::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gold-fill),rgba(214,35,0,0));
transform:scaleX(0);transform-origin:left;
transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.qi:hover{
transform:translateY(-5px);border-color:#dcd5d3;
box-shadow:inset 0 1px 0 #fff,
0 2px 4px rgba(10,10,14,.06),
0 16px 28px -14px rgba(10,10,14,.42),
0 36px 58px -30px rgba(10,10,14,.55);
}
.qi:hover::before{transform:scaleX(1)}
.qi .qbg{
position:absolute;right:-16px;top:-16px;width:98px;height:98px;
color:var(--navy);opacity:.06;pointer-events:none;
transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .35s;
}
.qi:hover .qbg{transform:rotate(-8deg) scale(1.08);opacity:.09}
.qi > span:last-child{position:relative;z-index:1}
.qi .qc{
width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold-fill) 100%);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 7px -2px rgba(138,111,55,.45);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.qi:hover .qc{transform:translateY(-1px) scale(1.04)}
.qi b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.qi span{display:block;font-size:13.4px;color:var(--muted)}
/* ================= hekim ================= */
.doc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:860px){.doc{grid-template-columns:1fr}}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--rl);overflow:hidden;background:var(--navy-g);display:grid;place-items:center;box-shadow:var(--sh)}
/* Portre kabi 4/5; kaynak foto daha dik olabilecegi icin kirpilarak oturtulur,
odak yuze yakin kalsin diye ust kesime kaydirilir. */
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.portrait .ic{width:34%;color:rgba(255,255,255,.2)}
.portrait .tagline{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(180deg,transparent,rgba(10,10,14,.92));color:#fff}
.portrait .tagline b{display:block;font-size:17px;font-weight:600}
.portrait .tagline span{font-size:13px;color:#d2c8c5}
.portrait .ph-note{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.94);color:var(--navy);font-size:12px;font-weight:600;padding:6px 13px;border-radius:var(--pill)}
.doc .lead{margin-top:16px;font-size:clamp(17.4px,1.9vw,20px);line-height:1.6}
.doc .txt{margin-top:14px;display:flex;flex-direction:column;gap:13px}
.doc .txt p{color:var(--muted);font-size:16px}
.cvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:1050px){.cvgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.cvgrid{grid-template-columns:1fr}}
.cvgrid div{
position:relative;overflow:hidden;
background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
transition:border-color .26s,transform .26s cubic-bezier(.2,.7,.3,1),background .26s;
}
.cvgrid div:hover{border-color:var(--line-d);transform:translateY(-2px)}
.cvgrid .cvbg{
position:absolute;right:-12px;top:-12px;width:74px;height:74px;
color:var(--navy);opacity:.06;pointer-events:none;
transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .35s;
}
.cvgrid div:hover .cvbg{transform:rotate(-8deg) scale(1.08);opacity:.1}
.cvgrid b,.cvgrid span,.cvgrid small{position:relative;z-index:1}
.cvgrid b{display:block;font-size:13.5px;color:var(--gold);font-weight:700}
.cvgrid span{display:block;font-size:14.6px;font-weight:600;margin-top:2px}
.cvgrid small{display:block;font-size:13px;color:var(--muted)}
/* ================= alan kartları ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,26px)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-l);border-color:transparent}
.card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph img{transform:scale(1.07)}
.card .ph b{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.95);color:var(--navy);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:var(--pill)}
.card .bd{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:21px}
.card h3 .med{display:block;font-size:14px;font-weight:500;color:var(--gold);margin-top:3px}
.meth h3 .med{color:var(--gold);font-weight:500}
.card p{
font-size:15px;color:var(--muted);line-height:1.6;
min-height:calc(4 * 1.6em);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;
}
.card .go{margin-top:2px;padding-top:4px;font-size:14.5px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:7px}
.card .go svg{transition:transform .22s}
.card:hover .go svg{transform:translateX(4px)}
/* ================= ODAK: sekmeli gösterim ================= */
.tabs{display:inline-flex;gap:4px;padding:5px;background:var(--mist-2);border-radius:var(--pill);margin-bottom:26px}
.tabs button{border:0;background:transparent;color:var(--muted);font-size:15px;font-weight:600;padding:11px 24px;border-radius:var(--pill);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.tpanel{display:none}
.tpanel.on{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,48px);align-items:center}
@media (max-width:900px){.tpanel.on{grid-template-columns:1fr}}
.shotwrap{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-l);background:var(--navy-d)}
.shotwrap img{width:100%;height:100%;object-fit:cover}
.shotwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.1),rgba(10,10,14,.55))}
.pin{position:absolute;left:var(--x);top:var(--y);z-index:3;transform:translate(-50%,-50%)}
.pin > i{display:block;width:15px;height:15px;border-radius:var(--pill);background:var(--gold-l);border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:pointer}
@media (prefers-reduced-motion:no-preference){
.pin::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:var(--pill);background:rgba(194,160,89,.55);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.2);opacity:0}100%{opacity:0}}
}
.pin .tip{
position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(6px);
width:max-content;max-width:230px;background:var(--paper);color:var(--ink);font-size:13.4px;line-height:1.45;
padding:10px 14px;border-radius:12px;box-shadow:var(--sh);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;pointer-events:none;
}
.pin:hover .tip,.pin:focus-within .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pin .tip b{display:block;color:var(--gold);font-size:12.5px}
.fx-info .tag{display:inline-block;font-size:13px;font-weight:600;color:var(--gold);padding:5px 14px;border:1px solid var(--line-d);border-radius:var(--pill);margin-bottom:14px}
.fx-info h3{font-size:clamp(24px,3vw,34px)}
.fx-info > p{margin-top:14px;color:var(--muted);font-size:16.2px}
.hows{display:grid;gap:12px;margin-top:24px}
.how{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start}
.how .n{width:38px;height:38px;border-radius:var(--pill);background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:700}
.how b{display:block;font-size:16px;font-weight:600}
.how span{display:block;font-size:14.6px;color:var(--muted);line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px;margin-top:26px}
.stat{background:var(--mist);border-radius:var(--r);padding:16px 18px}
.stat b{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.stat span{display:block;font-size:13.2px;color:var(--muted);margin-top:2px}
.fxnote{margin-top:22px;background:var(--gold-w);border-left:3px solid var(--gold);padding:14px 18px;border-radius:0 var(--rs) var(--rs) 0;font-size:14.4px;line-height:1.55}
/* ================= yöntem ızgarası ================= */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.filters button{border:1px solid var(--line-d);background:var(--paper);color:var(--ink);border-radius:var(--pill);padding:10px 20px;cursor:pointer;font-size:14.5px;font-weight:500;transition:background .2s,border-color .2s,color .2s,transform .2s}
.filters button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.filters .cnt{margin-left:auto;font-size:14px;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(14px,1.8vw,22px)}
.meth{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.meth:hover{transform:translateY(-5px);box-shadow:var(--sh-l);border-color:transparent}
.meth .mp{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--mist-2)}
.meth .mp img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.meth:hover .mp img{transform:scale(1.08)}
.meth .mp .cat{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.94);color:var(--navy);font-size:11.8px;font-weight:600;padding:5px 12px;border-radius:var(--pill)}
.meth .mb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.meth h3{font-size:18.5px;line-height:1.24}
.meth h3 em{display:block;font-style:normal;font-size:13.4px;font-weight:400;color:var(--muted);margin-top:3px}
.meth p{font-size:14.6px;color:var(--muted);line-height:1.56}
.meth .sp{margin-top:auto;padding-top:13px;display:flex;flex-wrap:wrap;gap:6px}
.meth .sp span{font-size:11.8px;color:var(--muted);background:var(--mist);padding:3px 9px;border-radius:var(--pill);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ================= süreç ================= */
.proc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,3.4vw,54px);align-items:center}
@media (max-width:860px){.proc{grid-template-columns:1fr}}
.proc .shot{border-radius:var(--rl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh)}
.proc .shot img{width:100%;height:100%;object-fit:cover}
.steps{display:grid;gap:4px}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:16px;border-radius:var(--r);transition:background .22s}
.step:hover{background:var(--paper)}
.step .n{width:40px;height:40px;font-size:15px;font-weight:700;color:var(--gold);background:var(--gold-w);display:grid;place-items:center;border-radius:var(--pill)}
.step h3{font-size:18px;margin-bottom:4px}
.step p{font-size:15px;color:var(--muted);line-height:1.58}
/* ================= galeri (kullanılmıyor) ================= */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.gal figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 15px;background:linear-gradient(180deg,transparent,rgba(10,10,14,.82));color:#fff;font-size:14px;font-weight:500}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}.gal figure:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}}
/* ================= son yazılar ================= */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(16px,2vw,24px)}
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-l);border-color:transparent}
.post .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mist-2)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.post:hover .ph img{transform:scale(1.07)}
.post .ph .kc{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);color:var(--navy);font-size:11.8px;font-weight:600;padding:5px 12px;border-radius:var(--pill)}
.post .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.4px;color:var(--muted)}
.post .meta span{border:1px solid var(--line-d);border-radius:3px;padding:3px 9px;line-height:1.4;white-space:nowrap}
.post .meta i{display:none}
.post h3{font-size:18.8px;line-height:1.28}
.post p{font-size:14.6px;color:var(--muted);line-height:1.56}
.post .go{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:7px}
.post .go svg{transition:transform .22s}
.post:hover .go svg{transform:translateX(4px)}
/* ================= randevu ================= */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,4vw,58px);align-items:start}
@media (max-width:860px){.book{grid-template-columns:1fr}}
.contact{display:grid;gap:10px}
.contact div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;background:var(--mist);border-radius:var(--r);padding:16px 18px;align-items:center}
.contact .ci{width:42px;height:42px;border-radius:12px;background:var(--paper);color:var(--gold);display:grid;place-items:center}
.contact .k{font-size:13px;color:var(--muted);display:block}
.contact .v{font-size:16.4px;font-weight:600}
.contact .v a{color:inherit;text-decoration:none}
.contact .v a:hover{color:var(--gold)}
.contact .v small{display:block;font-size:13.6px;color:var(--muted);font-weight:400}
.urgent{margin-top:16px;background:var(--gold-w);border-left:3px solid var(--gold-fill);padding:15px 18px;font-size:14.4px;border-radius:0 var(--rs) var(--rs) 0}
form{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:clamp(22px,3vw,34px);display:grid;gap:19px;box-shadow:var(--sh)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:19px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:14px;font-weight:600}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:15.6px;color:var(--ink);background:var(--mist);border:1px solid transparent;border-radius:var(--rs);padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 23px,calc(100% - 13px) 23px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:var(--paper);border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,35,0,.18)}
.fld input::placeholder,.fld textarea::placeholder{color:#a89f9c}
.ok{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.55}
.ok input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold);flex:none}
.sent{display:none;gap:11px;align-items:flex-start;background:var(--gold-w);border-left:3px solid var(--gold);padding:15px 18px;font-size:14.6px;border-radius:0 var(--rs) var(--rs) 0}
.sent.on{display:flex}
.tiny{font-size:13.2px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px;line-height:1.55}
/* ================= FOOTER ================= */
footer{background:var(--navy-d);color:#c4c4cd;position:relative}
.fcta{
background:linear-gradient(135deg,#332423,#1b1413);
border:1px solid rgba(255,255,255,.14);border-radius:3px;
padding:clamp(26px,3.4vw,42px);
margin-block:clamp(40px,4.6vw,60px) 0;
position:relative;z-index:2;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;overflow:hidden;
}
.fcta::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(194,160,89,.22),transparent 68%);pointer-events:none}
.fcta h3{font-size:clamp(22px,2.6vw,30px);color:#fff;position:relative;z-index:2}
.fcta p{margin-top:8px;color:#cdcdd5;font-size:15.4px;position:relative;z-index:2}
.fcta .acts{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:2}
@media (max-width:760px){.fcta{grid-template-columns:1fr}}
/* Dört sütun: marka + üç bağlantı listesi. Sütunlar geniş tutulur ki
uzun sayfa adları iki-üç satıra bölünüp dar görünmesin. */
.fmain{display:grid;grid-template-columns:minmax(0,.92fr) repeat(3,minmax(0,1fr));
gap:clamp(24px,2.6vw,44px);padding-block:clamp(44px,5vw,64px) clamp(30px,4vw,44px)}
footer h4{font-size:15px;color:#fff;font-weight:600;margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.8px}
footer a{color:#c4c4cd;text-decoration:none;transition:color .18s,padding-left .18s}
footer ul a:hover{color:var(--gold-l);padding-left:4px}
.fbrand{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.fbrand .em{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-weight:700}
.fbrand b{display:block;color:#fff;font-size:17px}
.fbrand span{display:block;font-size:13px}
.fbrand-gorsel img{display:block;height:48px;width:auto;max-width:min(100%,264px);aspect-ratio:832/149}
.legal{font-size:14px;line-height:1.62;max-width:46ch}
.fsoc{display:flex;gap:10px;margin-top:20px}
.fsoc a{width:40px;height:40px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s}
.fsoc a:hover{background:var(--gold-fill);border-color:var(--gold-fill);color:#fff;transform:translateY(-3px)}
.hours{display:grid;gap:8px;font-size:14.4px}
.hours div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;padding-bottom:7px;border-bottom:1px dashed rgba(255,255,255,.14)}
.hours span{white-space:nowrap}
.hours span:last-child{color:#efe8e6;font-variant-numeric:tabular-nums}
.hours .off span:last-child{color:var(--gold-l)}
@media (max-width:1080px){
/* dört sütun 1080 altında daralıp iki satıra kırılıyordu */
.fmain{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
.fmain > div:first-child{grid-column:1 / -1}
}
@media (max-width:540px){
.fmain{grid-template-columns:1fr;gap:26px}
.legal{max-width:none}
.fbot{gap:10px 16px}
}
.fuyari{
margin:0 0 18px;padding:12px 20px;border:1px solid rgba(194,160,89,.38);
border-radius:12px;background:rgba(194,160,89,.07);
color:#d8d6cf;font-size:13.6px;line-height:1.55;text-align:center;
}
@media (max-width:560px){.fuyari{padding:11px 14px;font-size:12.8px}}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;font-size:13.4px}
.fbot .lks{display:flex;flex-wrap:wrap;gap:8px 20px}
.fbot .w{color:var(--gold-l)}
.totop{position:fixed;right:20px;bottom:20px;z-index:150;width:48px;height:48px;border-radius:var(--pill);background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .28s,transform .28s,visibility .28s,background .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--gold)}
/* ================= mobil ================= */
/* Çekmecenin başlık ve alt bloğu yalnız mobilde vardır. */
.menu-bas,.menu-alt,.menu-perde{display:none}
@media (max-width:1240px){
.burger{display:grid;justify-self:end}
.nav .wrap{grid-template-columns:minmax(0,1fr) auto}
/* --- yandan açılan menü çekmecesi --- */
/* Eski düzende liste, başlığın altına açılıp sayfayı aşağı itiyordu. Çekmece
sayfanın üstünde durur, arkası karartılır ve gövde kaydırması kilitlenir. */
.menu-perde{
display:block;position:fixed;inset:0;z-index:180;
background:rgba(12,12,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity .28s ease;
}
.menu-perde[hidden]{display:none}
.menu-perde.acik{opacity:1}
.menu{
position:fixed;top:0;right:0;bottom:0;left:auto;z-index:190;
/* ⚠ justify-content BASA alinir. Masaustu kuralindan gelen "center",
dikey sutunda icerik tastiginda ust yariyi kaydirmayla erisilemez
hale getiriyordu (alt baslik acilinca ust kisim kayboluyordu). */
width:min(86vw,380px);flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
background:var(--paper);padding:0;overflow-y:auto;overscroll-behavior:contain;
box-shadow:-18px 0 50px -24px rgba(10,10,14,.55);
transform:translateX(102%);transition:transform .32s cubic-bezier(.22,1,.36,1);
-webkit-overflow-scrolling:touch;
}
.menu[hidden]{display:flex} /* kapalıyken de yerinde kalır, dışarı kayar */
.menu[hidden]{visibility:hidden}
.menu.acik{transform:translateX(0);visibility:visible}
body.menu-acik{overflow:hidden}
/* çekmece başlığı: marka + kapat */
.menu-bas{
display:flex;align-items:center;gap:12px;justify-content:space-between;
position:sticky;top:0;z-index:2;padding:14px 16px;
background:var(--paper);border-bottom:1px solid var(--line);
}
.mb-marka{display:flex;align-items:center;gap:10px;min-width:0}
.mb-marka .em{
width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:9px;
background:var(--navy-g);color:#fff;font-family:var(--fd);font-size:14px;font-weight:700;letter-spacing:.02em;
}
.mb-marka b{display:block;font-family:var(--fd);font-size:14.6px;font-weight:600;color:var(--ink);line-height:1.25}
.mb-marka i{display:block;font-style:normal;font-size:12.2px;color:var(--mut);line-height:1.3}
.mb-marka-gorsel img{display:block;height:36px;width:auto;max-width:min(100%,196px);aspect-ratio:832/149}
.mb-kapat{
flex:none;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
border:1px solid var(--line-d);border-radius:9px;background:var(--paper);color:var(--ink);
transition:background .18s,border-color .18s,color .18s;
}
.mb-kapat:hover{background:var(--gold-w);border-color:var(--gold);color:var(--gold)}
.menu > li{border-bottom:1px solid var(--line)}
.menu > li.menu-bas,.menu > li.menu-alt{border-bottom:0}
.menu > li:not(.menu-alt) > a,.mtrigger{width:100%;justify-content:flex-start;gap:11px;padding:15px 16px;border-radius:0;font-size:15.6px}
.mtrigger > svg:last-child{margin-left:auto;transition:transform .25s}
.has-mega[data-open="1"] > .mtrigger > svg:last-child{transform:rotate(180deg)}
.has-mega[data-open="1"] > .mtrigger{color:var(--gold);background:var(--gold-w)}
/* alt başlıklar akordiyon gibi açılır */
.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;display:none;background:var(--mist)}
.has-mega[data-open="1"] > .mega{display:block}
.mega-in{display:block;padding:6px 0 12px}
.mizgara{display:block}
.mkart{border:0;border-radius:0;padding:0;background:transparent}
.mcols{grid-template-columns:1fr;gap:2px}
.mcols a{padding:11px 16px}
.mcols .ic{width:30px;height:30px;border-radius:8px}
.mgroups{grid-template-columns:1fr;gap:0}
.mega-alt{padding:4px 16px 0}
.mega-alt p{display:none}
.mfeat{display:none}
/* çekmece alt bloğu: randevu + telefon */
/* ⚠ margin-top:auto KULLANILMAZ. Kaydirilabilir bir flex sutununda son
ogedeki otomatik ust bosluk, icerik tasmaya basladigi anda (ornegin bir
alt baslik acildiginda) tum icerigi yukari cekiyor ve ust kisim
kaydirmayla erisilemez hale geliyordu. */
.menu-alt{
display:grid;gap:10px;position:sticky;bottom:0;z-index:2;
padding:14px 16px calc(14px + env(safe-area-inset-bottom));
background:var(--paper);border-top:1px solid var(--line);
}
/* Liste kisayken alt blok en alta oturur; icerik tastiginda bu bosluk
kendiliginden sifirlanir (justify-content:flex-start ile guvenli). */
.menu-alt{margin-top:auto}
.menu-alt .btn{width:100%;justify-content:center}
.ma-tel{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 14px;border:1px solid var(--line-d);border-radius:3px;
font-family:var(--fd);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
transition:border-color .18s,color .18s;
}
.ma-tel:hover{border-color:var(--gold);color:var(--gold)}
.nav > .wrap > .nav-sag{display:none}
}
@media (prefers-reduced-motion:reduce){
.menu{transition:none}
.menu-perde{transition:none}
}
@media (min-width:901px){.menu[hidden]{display:flex}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
/* ---------- WhatsApp ---------- */
.btn-wa{background:#1da851;color:#fff}
.btn-wa:hover{background:#17883f;transform:translateY(-2px)}
.wafab{
position:fixed;right:20px;bottom:20px;z-index:150;display:inline-flex;align-items:center;gap:9px;
background:#1da851;color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
padding:13px 18px;border-radius:3px;border:0;transition:background .2s,transform .2s;
}
.wafab:hover{background:#17883f;transform:translateY(-2px)}
.wafab svg{width:22px;height:22px;flex:none}
.wafab{padding:14px;gap:0}
.wafab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .38s cubic-bezier(.2,.7,.3,1),padding-left .38s}
.wafab:hover span,.wafab:focus-visible span{max-width:180px;padding-left:10px}
@media (prefers-reduced-motion:reduce){.wafab span{transition:none}}
/* ---------- düğme köşeleri: 3px ---------- */
.btn,.filters button,.tabs,.tabs button,.harrows button,.burger,
.menu > li > a,.mtrigger,.hslide .tag,.fx-info .tag,.card .ph b,.meth .cat,
.post .kc,.badge,.tg,.meth .sp span,.mapinfo .chips span{border-radius:3px}
/* Yukarı çık düğmesi tam daire: mobil eylem çubuğunun yuvarlak hattıyla
aynı dili konuşur ve köşesi çubuğa değmez. */
.totop{bottom:82px;border-radius:50%}
/* ---------- şikayet ızgarası ---------- */
.sik{background:var(--mist);padding-block:clamp(46px,5.5vw,72px)}
.sikgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:10px}
.sikgrid a{
display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--line);
border-radius:3px;padding:16px 18px;text-decoration:none;font-size:15.4px;font-weight:500;
transition:border-color .22s,transform .22s,background .22s;
}
.sikgrid a:hover{border-color:var(--gold);transform:translateX(4px);background:var(--gold-w)}
.sikgrid .si{
width:30px;height:30px;flex:none;border-radius:3px;background:var(--mist-2);color:var(--gold);
display:grid;place-items:center;font-size:13.5px;font-weight:700;
}
.sikgrid a:hover .si{background:var(--gold);color:#fff}
/* ---------- sık sorulan sorular ---------- */
.sss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;max-width:1140px;margin-inline:auto}
.sss details{display:flex;flex-direction:column}
.sss summary{flex:1 0 auto}
@media (max-width:880px){.sss{grid-template-columns:1fr}}
#sss .head{margin-inline:auto;text-align:center}
#sss .head .eyebrow{justify-content:center}
#sss .head p{margin-inline:auto}
.sss summary{text-align:left}
.sss .ans{margin-inline:auto}
.sss details{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sss details[open]{border-color:var(--line-d)}
.sss summary{
list-style:none;cursor:pointer;padding:15px 19px;font-size:15.3px;font-weight:600;
display:flex;align-items:center;justify-content:space-between;gap:14px;transition:color .2s;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--gold)}
.sss summary::after{
content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s;
}
.sss details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.sss .ans{padding:0 19px 18px;color:var(--muted);font-size:14.6px;line-height:1.66;max-width:80ch}
/* ---------- menü ve footer ikonları ---------- */
.menu > li > a,.mtrigger{gap:8px}
.menu .mi{flex:none;opacity:.7;transition:opacity .2s,color .2s}
.menu > li:not(.menu-alt) > a:hover .mi,.mtrigger:hover .mi{opacity:1;color:var(--gold)}
@media (min-width:1241px) and (max-width:1339px){.menu .mi{display:none}}
@media (min-width:901px) and (max-width:1120px){.menu > li > a,.mtrigger{padding:10px 9px;font-size:14.4px}}
.mgroups h4{display:flex;align-items:center;gap:8px}
.mgroups h4 .mi{width:15px;height:15px;flex:none}
.mgroups a{position:relative}
footer h4{display:flex;align-items:center;gap:9px}
footer h4 .mi{width:16px;height:16px;flex:none;color:var(--gold-l)}
footer ul a{position:relative;padding-left:17px;display:block}
footer ul a::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-right:1.6px solid var(--gold-l);border-bottom:1.6px solid var(--gold-l);transform:rotate(-45deg);opacity:.8;transition:left .18s}
footer ul a:hover{padding-left:21px}
footer ul a:hover::before{left:6px}
/* ---------- randevu: fotoğraflı ziyaret kartı ---------- */
.hoursbox{margin-top:14px;background:var(--mist);border-radius:3px;padding:18px 20px}
.hoursbox h4{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:12px}
.hoursbox h4 svg{color:var(--gold);flex:none}
.hoursbox div{display:flex;justify-content:space-between;gap:14px;font-size:14.6px;padding:7px 0;border-bottom:1px dashed var(--line-d)}
.hoursbox div:last-child{border-bottom:0}
.hoursbox div span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.hoursbox .off span:last-child{color:var(--gold)}
.bookacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.visitcard{position:relative;border-radius:3px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;background:var(--navy-d)}
.visitcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visitcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.04) 26%,rgba(10,10,14,.52) 100%)}
.vc{position:relative;z-index:2;padding:clamp(16px,2vw,22px);color:#fff;width:100%}
.vc > .vbox{
background:rgba(26,18,17,.62);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
border:1px solid rgba(255,255,255,.14);border-radius:14px;
padding:18px 20px;
box-shadow:0 24px 44px -34px rgba(0,0,0,.8);
}
@supports not (backdrop-filter: blur(4px)){ .vc > .vbox{background:rgba(26,18,17,.86)} }
.vc .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gold-l);margin-bottom:10px}
.vc b{display:block;font-size:clamp(20px,2.2vw,25px);font-weight:600;line-height:1.25}
.vc p{margin-top:9px;font-size:15px;color:#ddd3d0;line-height:1.55;max-width:38ch}
.vc .btn{margin-top:18px}
@media (max-width:860px){.visitcard{min-height:360px}}
/* ---------- tanı ve testler ---------- */
.tkut{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(14px,2vw,26px)}
.tkol h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding-bottom:12px;border-bottom:2px solid var(--gold);margin-bottom:6px}
.tkol a{display:flex;align-items:center;gap:10px;padding:13px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;font-size:15.6px;font-weight:600;transition:padding .2s,color .2s}
.tkol a b{min-width:0;font-weight:inherit}
/* Satır başındaki konu ikonu; /tani-ve-testler listesindekiyle aynı kural */
.tk-sim{flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:var(--gold-w);color:var(--gold)}
.tk-sim svg{width:15px;height:15px}
.tkol a span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.tkol a:hover{color:var(--gold);padding-left:7px}
.lawnote{margin-top:22px;padding:15px 18px;background:var(--mist);border-left:3px solid var(--gold);border-radius:0 3px 3px 0;font-size:13.8px;color:var(--muted);line-height:1.6}
/* ---------- başlık çubuğu randevu düğmesi ---------- */
.navcta{flex:none;padding:11px 20px;font-size:14.6px;gap:8px;margin-left:clamp(8px,1.4vw,20px);position:relative}
.navcta::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.4vw,20px) / 2);top:6px;bottom:6px;width:1px;background:var(--line)}
.navcta svg{opacity:.7}
.navcta svg{opacity:.85}
.navcta:hover svg{transform:none}
@media (max-width:900px){
.brand{margin-right:auto;padding-right:0}
.brand-gorsel img{height:44px}
.menu{flex:initial}
.navcta::before{display:none}
}
@media (max-width:420px){
/* dar telefonda logo ile hamburger yan yana kalsın */
.brand-gorsel img{height:38px}
}
/* ---------- öne çıkan ameliyatlar şeridi ---------- */
.rslider{position:relative;height:300px;overflow:hidden;background:var(--navy-d)}
.rtrack{position:absolute;inset:0}
.rslide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1}
.rslide.prev{opacity:1;visibility:visible;z-index:1}
.rslide.on{opacity:1;visibility:visible;z-index:2}
.rslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
/* geçiş: diyagonal perde + görsel parallaksı + kademeli metin */
.rtrack.anim .rslide.on{animation:rwipe .95s cubic-bezier(.76,0,.24,1) both}
.rtrack.anim .rslide.on img{animation:rpan 1.5s cubic-bezier(.18,.72,.28,1) both}
.rtrack.anim .rslide.on .rk{animation:rup .55s .3s cubic-bezier(.22,1,.36,1) both}
.rtrack.anim .rslide.on h3{animation:rup .6s .38s cubic-bezier(.22,1,.36,1) both}
.rtrack.anim .rslide.on p{animation:rup .6s .48s cubic-bezier(.22,1,.36,1) both}
@keyframes rwipe{
from{clip-path:polygon(0 0, 0 0, 0 100%, 0 100%)}
to{clip-path:polygon(0 0, 118% 0, 100% 100%, 0 100%)}
}
@keyframes rpan{
from{transform:scale(1.22) translateX(-5%)}
to{transform:scale(1.05) translateX(0)}
}
@keyframes rup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.rslide::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,10,14,.58) 0%,rgba(10,10,14,.36) 46%,rgba(10,10,14,.14) 78%,rgba(10,10,14,.08) 100%)}
.rin{position:relative;z-index:2;height:100%;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);display:flex;flex-direction:column;justify-content:center;color:#fff}
.rbox{
background:rgba(26,18,17,.60);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
border:1px solid rgba(255,255,255,.14);border-radius:14px;
padding:18px 22px;max-width:54ch;
box-shadow:0 24px 44px -34px rgba(0,0,0,.8);
}
@supports not (backdrop-filter: blur(4px)){ .rbox{background:rgba(26,18,17,.85)} }
.rin .rk{font-size:13px;font-weight:600;color:var(--gold-l);margin-bottom:8px}
.rin h3{font-size:clamp(22px,2.8vw,31px);color:#fff;letter-spacing:-.02em}
.rin p{margin-top:10px;font-size:15.4px;color:#ddd3d0;max-width:46ch;line-height:1.55}
.rnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:3px;border:1px solid rgba(255,255,255,.32);background:rgba(10,10,14,.42);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .2s,border-color .2s}
.rnav:hover{background:rgba(255,255,255,.18);border-color:#fff}
.rprev{right:76px}.rnext{right:26px}
.rdots{position:absolute;left:0;right:0;bottom:18px;z-index:4;display:flex;gap:7px;justify-content:center}
.rdots button{width:26px;height:3px;border:0;padding:0;background:rgba(255,255,255,.32);cursor:pointer;border-radius:2px;transition:background .25s,width .25s}
.rdots button[aria-current="true"]{background:var(--gold-l);width:42px}
@media (max-width:760px){
.rslider{height:auto;min-height:330px}
.rin{padding-block:34px 52px}
.rnav{top:auto;bottom:14px;transform:none;width:34px;height:34px}
.rprev{right:58px}.rnext{right:16px}
.rdots{justify-content:flex-start;left:var(--gut);right:auto;bottom:24px}
}
@media (prefers-reduced-motion:reduce){
.rslide img{transform:none}
.rtrack.anim .rslide.on,.rtrack.anim .rslide.on img,
.rtrack.anim .rslide.on .rk,.rtrack.anim .rslide.on h3,.rtrack.anim .rslide.on p{animation:none}
}
/* =========================================================================
DEĞİŞKEN KÖPRÜSÜ — iç sayfa bileşenleri eski adları kullanır,
değerler yeni paletten gelir.
========================================================================= */
:root{
--d950:#0d0d0f; --d900:#121214; --d800:#1f1f22; --base:#171719;
--d700:#26262a; --d600:#36363b; --d500:#6b6963; --d400:#8b8980;
--d300:#b5b2a9; --d200:#ece7dd; --d100:#f7f5f1; --d50:#faf8f4;
/* Eski "kirmizi" adlari korunur; degerleri artik altin paletinden gelir. */
--kirmizi:var(--gold); --kirmizi-d:#6f5729; --kirmizi-l:var(--gold-l); --kirmizi-w:var(--gold-w);
--mut:var(--muted); --fade:#74747f; --line2:var(--line-d);
/* Gövde metni rengi. Tanımsız bırakıldığı için sayfalar body'nin #131316
tonunu miras alıyor ve uzun metinde sert duruyordu. */
--ink2:#3a3a44;
--fd:"Outfit","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
--fm:"Outfit","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
--fb:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
--wrap:var(--max);
--r-lg:var(--r);
--sh:0 2px 6px rgba(10,10,14,.06), 0 26px 50px -30px rgba(10,10,14,.45);
--sh-l:0 4px 10px rgba(10,10,14,.07), 0 44px 80px -40px rgba(10,10,14,.55);
--ease:cubic-bezier(.22,.7,.3,1);
}
/* ======================= 10 · İÇ SAYFALAR ================================= */
.pg{background:var(--paper);padding-block:clamp(30px,4vw,56px)}
.pg-hero{background:var(--d950);color:#fff;padding-block:clamp(30px,4.4vw,54px);position:relative;overflow:hidden}
.pg-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(760px 420px at 88% -10%,rgba(204,26,13,.20),transparent 60%),
radial-gradient(620px 420px at -4% 110%,rgba(47,95,138,.30),transparent 58%)}
.pg-hero .wrap{position:relative;z-index:1;max-width:1400px}
.pg-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-size:11.6px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--kirmizi-l);margin-bottom:12px}
.pg-hero .eyebrow::before{content:"";width:24px;height:2px;background:var(--kirmizi)}
/* Başlık, altındaki ana içerik sütunuyla aynı genişliğe kadar uzar; erken
satır kırılmasın diye 24ch sınırı kaldırıldı. 320px yan sütun + grid
boşluğu düşülerek .pg-govde içerik sütunuyla hizalanır. */
.pg-hero h1{font-size:clamp(23px,3.1vw,39px);font-weight:700;line-height:1.14;letter-spacing:-.004em;max-width:calc(100% - 320px - clamp(24px,3.4vw,52px))}
/* Bölüm ve liste sayfalarında içerik .pg-tam ile 1480px'e kadar uzar;
başlık da aynı hizada dursun diye hero sarmalayıcısı eşitlenir. */
.pg-hero-tam .wrap{max-width:1480px}
.pg-hero-tam h1{max-width:none}
.pg-hero-yasal .wrap{max-width:840px}
.pg-hero-yasal h1,.pg-hero-yasal p{max-width:none}
@media (max-width:980px){.pg-hero h1{max-width:none}}
.pg-hero p{margin-top:12px;color:var(--d300);font-size:16.2px;line-height:1.68;max-width:74ch}
.bc{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13.2px;color:var(--d400);margin-bottom:14px}
.bc a{color:var(--d300)}
.bc a:hover{color:#fff}
.bc span{color:var(--d500)}
/* Okuma sütunu 1280px kalıbında dar kalıyordu; sarmalayıcı 1400px'e
genişletildi. Yan sütun 320px sabit kaldığı için kazanılan yer
tümüyle metne gider. Hero başlığı da aynı ölçüye göre hizalanır. */
.pg-govde{max-width:1400px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:980px){.pg-govde{grid-template-columns:1fr}}
/* yasal sayfalar: yan sütunsuz, ortalanmış dar okuma sütunu */
.pg-yasal{max-width:840px;margin-inline:auto}
/* içeriğin sağ altındaki yayın ve güncelleme tarihi */
/* Künye satırı: üç bilginin her biri kendi çerçevesinde durur, bu yüzden
aradaki "·" ayraçları gizlenir. */
.icerik-tarih{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;
margin:22px 0 0;font-style:italic;font-size:13.2px;color:var(--fade)}
.icerik-tarih > span{display:inline-flex;align-items:center;gap:4px;
padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--d50)}
.icerik-tarih time{font-style:italic}
.icerik-tarih .ayrac{display:none}
.icerik-tarih .ct-inceleyen{font-style:normal;font-weight:600}
.icerik-tarih .ct-inceleyen svg{display:inline-block;vertical-align:-2px;margin-right:3px;color:var(--kirmizi-d,#6f5729)}
.icerik-tarih .ct-inceleyen a{color:var(--kirmizi-d,#6f5729);text-decoration:none}
.icerik-tarih .ct-inceleyen a:hover{text-decoration:underline}
/* Site haritası dizini — kayıtlardan üretilen üç kademeli liste */
.sh-kart{margin-top:22px}
.sh-bolum{padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}
.sh-bolum:first-of-type{padding-top:0;margin-top:14px;border-top:0}
.sh-bolum > h3{font-family:var(--fd);font-size:17.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.sh-bolum > h3 a{color:inherit;text-decoration:none}
.sh-bolum > h3 a:hover{color:var(--kirmizi-d)}
.sh-kume{padding:10px 0 0 2px}
.sh-kume h4{font-size:14.6px;font-weight:600;color:var(--kirmizi-d);margin-bottom:6px}
.sh-kume h4 a{color:inherit;text-decoration:none}
.sh-kume h4 a:hover{text-decoration:underline}
.sh-kume ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 20px;
margin:0;padding:0;list-style:none}
.sh-kume li{margin:0}
.sh-kume li a{display:block;padding:4px 0;font-size:14.6px;line-height:1.5;color:var(--ink2);text-decoration:none}
.sh-kume li a:hover{color:var(--kirmizi-d)}
.sh-not{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13.4px;color:var(--fade)}
/* Kaynakça kartı yalnız okunur: metin seçilemez, kopyalanamaz, öğeler
tıklanamaz. Kaynak adresleri sayfa şemasındaki `citation` alanında durur. */
.kaynakca-kart{margin-top:22px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kaynakca-not{color:var(--fade);font-size:14px;margin:0 0 10px}
.kaynakca-liste{margin:0;padding-left:20px;display:grid;gap:7px;pointer-events:none;cursor:default}
.kaynakca-liste li{font-size:14.5px;line-height:1.5}
.kaynakca-liste span{word-break:break-word}
@media (max-width:560px){.icerik-tarih{justify-content:flex-start}}
/* Uzun yazılarda yan sütun boş kalmasın diye sütunun TAMAMI yapışkandır.
⚠ Yalnız hekim kartı yapışkan yapılırsa, altındaki kutular kartın altından
kayıp gider ve kart onların üstüne biner. Bu yüzden sütun tek parça hareket eder.
⚠ Sütunun kendi içinde kaydırma YOK: ekrandan uzunsa gizli kalan bölümü
görmenin tek yolu sayfayı aşağı indirmek olur. Bunu sağlayan `top` değeri
site.js'teki yanSutunHizala() tarafından hesaplanır; aşağıdaki değer yalnız
betik çalışmadan önceki ilk karedir. */
@media (min-width:981px){
.pg-govde > aside{position:sticky;top:70px;align-self:start}
}
.pg-metin{font-size:16.4px;line-height:1.78;color:var(--ink2)}
/* Genel h1-h4 kuralındaki 1.14 satır yüksekliği, iki satıra taşan Türkçe
başlıklarda g/y/ş/ç kuyruklarını alttaki satıra değdiriyordu.
Aynı kuraldaki text-wrap:balance uzun soru başlıklarını iki eşit parçaya
bölüyordu; "pretty" de son satırı güzelleştirmek için ilk satırı %74'te
kesiyordu. Gövde başlıkları satırı sonuna kadar kullansın diye olağan
(greedy) sarma kullanılır. */
.pg-metin h2,.pg-metin h3,.pg-metin h4,.pg-metin h5,.pg-metin h6{text-wrap:wrap}
.pg-metin h2{font-size:clamp(20px,2.4vw,27px);font-weight:700;color:var(--ink);margin:30px 0 10px;letter-spacing:-.004em;line-height:1.3}
.pg-metin h3{font-size:clamp(18px,2vw,21px);font-weight:600;color:var(--ink);margin:22px 0 8px;line-height:1.36}
.pg-metin h4,.pg-metin h5{line-height:1.4}
.pg-metin p{margin-bottom:14px;text-align:justify;text-justify:inter-word;hyphens:auto}
.pg-metin li{text-align:justify;text-justify:inter-word}
.pg-metin ul,.pg-metin ol{margin:0 0 16px 18px;padding:0;list-style:disc}
.pg-metin ol{list-style:decimal}
.pg-metin li{margin-bottom:7px}
.pg-metin a{color:var(--kirmizi-d);text-decoration:underline;text-underline-offset:3px}
.pg-bos{padding:22px;border:1px dashed var(--line2);border-radius:5px;color:var(--mut);background:var(--d50)}
.pg-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pg-kart{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:5px;background:var(--paper);transition:border-color .2s,transform .2s,box-shadow .2s}
.pg-kart:hover{border-color:var(--kirmizi);transform:translateY(-3px);box-shadow:var(--sh)}
.pg-kart b{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:16.4px;font-weight:600;color:var(--ink);line-height:1.34}
.pg-kart b svg{width:17px;height:17px;flex:none;color:var(--kirmizi)}
.pg-kart span{font-size:14.2px;color:var(--mut);line-height:1.6}
.yan-kutu{border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin-bottom:16px;background:var(--d50)}
.yan-kutu h2{font-family:var(--fd);font-size:11.6px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kirmizi-d);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.yan-kutu li a{display:block;padding:8px 0;font-size:14.8px;color:var(--ink2);border-bottom:1px solid var(--line);transition:color .18s,padding-left .18s}
.yan-kutu li:last-child a{border-bottom:0}
.yan-kutu li a:hover{color:var(--kirmizi-d);padding-left:6px}
.yan-kutu li a.acik{color:var(--kirmizi-d);font-weight:600}
/* İçindekiler kutusu: sayfa kaydıkça o an okunan başlığın satırı işaretlenir.
"etkin" sınıfını betik ekler; JavaScript kapalıyken liste düz bir bağlantı
listesi olarak çalışmayı sürdürür. Kutunun kendi içinde kaydırma yoktur;
yan sütun zaten yapışkan. */
.yan-icindekiler li a{border-left:2px solid transparent;padding-left:10px;transition:color .18s,padding-left .18s,border-color .18s,background-color .18s}
.yan-icindekiler li a:hover{padding-left:14px}
.yan-icindekiler li a.etkin{color:var(--kirmizi-d);font-weight:600;border-left-color:var(--kirmizi);background:var(--kirmizi-w)}
.yan-iletisim{background:var(--d950);color:var(--d300);border-color:var(--d800)}
.yan-iletisim h2{color:var(--kirmizi-l);border-bottom-color:rgba(255,255,255,.14)}
.yan-iletisim p{font-size:14.4px;line-height:1.7;margin-bottom:12px}
.yan-iletisim .btn{width:100%;justify-content:center}
.sss-liste{margin-top:28px;border-top:1px solid var(--line)}
.sss-liste details{border-bottom:1px solid var(--line);padding:14px 2px}
.sss-liste summary{cursor:pointer;font-family:var(--fd);font-size:16.4px;font-weight:600;color:var(--ink);list-style:none}
.sss-liste summary::-webkit-details-marker{display:none}
.sss-liste summary::after{content:"+";float:right;color:var(--kirmizi);font-weight:700}
.sss-liste details[open] summary::after{content:"–"}
.sss-liste .cevap{padding-top:10px;font-size:15.6px;line-height:1.72;color:var(--mut);
text-align:justify;text-justify:inter-word;hyphens:auto}
/* ---- iç sayfa başlığı: hareketli arkaplan (doku katmanları · nokta ağı · ışık) ---- */
.pg-hero{isolation:isolate}
.pg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pg-fx i{position:absolute;display:block}
/* nabız (M0 96 H60 l7 -9 l7 9 H108 l7 -42 l9 74 l7 -32 H176 l6 -8 q7 -6 14 0 l6 8 H300) izleri — altta belirgin, üstte ince */
.pg-fx-katman{
left:0;right:0;bottom:2%;height:150px;opacity:.55;
background-repeat:repeat-x;background-size:300px 160px;background-position-y:center;
-webkit-mask-image:linear-gradient(90deg,transparent 0 30%,#000 62%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0 30%,#000 62%,#000 100%);
background-image:url("data:image/svg+xml;utf8,");
animation:hmKatman 26s linear infinite;
}
@keyframes hmKatman{from{background-position-x:0}to{background-position-x:-300px}}
.pg-fx-katman2{
left:0;right:0;top:2%;height:130px;opacity:.26;
background-repeat:repeat-x;background-size:420px 160px;background-position-y:center;
-webkit-mask-image:linear-gradient(90deg,transparent 0 38%,#000 70%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0 38%,#000 70%,#000 100%);
background-image:url("data:image/svg+xml;utf8,");
animation:hmKatman2 40s linear infinite;
}
@keyframes hmKatman2{from{background-position-x:-420px}to{background-position-x:0}}
/* nabız halkaları — kalp atışı ritminde yayılır */
.pg-fx-nokta{
top:50%;left:82%;width:300px;height:300px;margin:-150px 0 0 -150px;opacity:.45;
border:1px solid rgba(194,160,89,.45);border-radius:50%;
animation:hmNabiz 4.8s cubic-bezier(.22,.7,.3,1) infinite;
}
.pg-fx-nokta::after{
content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;
animation:hmNabiz 4.8s cubic-bezier(.22,.7,.3,1) infinite 1.6s;
}
@keyframes hmNabiz{
0%{transform:scale(.28);opacity:0}
14%{opacity:.85}
100%{transform:scale(1.5);opacity:0}
}
/* yumuşak ışık süpürmesi */
.pg-fx-isik{
top:-60%;left:-24%;width:64%;height:220%;
background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.09) 44%,rgba(194,160,89,.13) 54%,transparent 74%);
filter:blur(8px);
animation:hmIsik 16s ease-in-out infinite;
}
@keyframes hmIsik{
0%{transform:translateX(-12%) rotate(6deg);opacity:0}
20%{opacity:1}
72%{opacity:1}
100%{transform:translateX(196%) rotate(6deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
.pg-fx-katman,.pg-fx-katman2,.pg-fx-nokta,.pg-fx-isik{animation:none}
}
/* alt bilgi bağlantı ikonları */
.ft-col li a{display:flex;align-items:center;gap:9px}
.ft-col li a svg{width:15px;height:15px;flex:none;color:var(--kirmizi);opacity:.85;transition:opacity .18s,transform .18s}
.ft-col li a:hover svg{opacity:1;transform:translateX(1px)}
.ft-col li a:hover{padding-left:5px}
/* alt bilgi düğmeleri: metin rengi .ft a kuralına ezdirilmemeli (kontrast) */
.ft a.ft-btn-pink{background:var(--kirmizi-d);color:#fff}
.ft a.ft-btn-pink:hover{background:var(--kirmizi)}
.ft a.ft-btn-line{color:#fff}
/* ======================= 11 · HAKKIMDA SAYFASI =========================== */
.hk{background:var(--paper);padding-block:clamp(30px,4vw,56px)}
/* Portre sag sutunda durur; metin once okunsun diye sira CSS ile verilir,
mobilde tek sutuna dusunce once fotograf gelir. */
.hk-giris{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start}
.hk-giris .hk-metin{order:1}
.hk-giris .hk-portre{order:2;position:sticky;top:90px}
@media (max-width:980px){.hk-giris{grid-template-columns:1fr}.hk-giris .hk-portre{order:0;position:static}}
.hk-portre{margin:0;position:relative}
/* oran görselin kendisinden gelir; sabit 3:4 kare fotoğrafı kırpıyordu */
.hk-portre img{width:100%;height:auto;object-fit:cover;border-radius:5px;display:block}
.hk-portre figcaption{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.hk-portre figcaption b{font-family:var(--fd);font-size:16.6px;font-weight:600;color:var(--ink)}
.hk-portre figcaption span{font-size:14.2px;color:var(--mut)}
.hk-metin .lead{font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--ink);line-height:1.62;margin-bottom:14px}
.hk-metin p{font-size:16.4px;line-height:1.78;color:var(--ink2);margin-bottom:13px}
.hk-ah{font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--ink);margin:26px 0 12px}
.hk-olgu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--line);border-radius:5px;margin:20px 0 6px;overflow:hidden}
.hk-olgu div{padding:14px 16px;border-right:1px solid var(--line)}
.hk-olgu div:last-child{border-right:0}
.hk-olgu b{display:block;font-family:var(--fd);font-size:clamp(22px,2.6vw,28px);font-weight:600;color:var(--base);line-height:1.1}
.hk-olgu span{display:block;margin-top:5px;font-size:13.4px;color:var(--mut);line-height:1.5}
.hk-etiketler{display:flex;flex-wrap:wrap;gap:8px}
.hk-etiketler a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:5px;
font-family:var(--fd);font-size:14.6px;font-weight:600;color:var(--ink2);background:var(--d50);transition:border-color .2s,color .2s,transform .2s}
.hk-etiketler a svg{width:16px;height:16px;color:var(--kirmizi)}
.hk-etiketler a:hover{border-color:var(--kirmizi);color:var(--kirmizi-d);transform:translateY(-2px)}
.hk-zaman,.hk-rozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,52px)}
.hk-blok h2{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kirmizi-d);
padding-bottom:11px;border-bottom:2px solid var(--kirmizi);margin-bottom:14px}
.hk-cizgi{position:relative;padding-left:20px;counter-reset:hk}
.hk-cizgi::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--line)}
.hk-cizgi li{position:relative;padding:0 0 18px 4px}
.hk-cizgi li::before{content:"";position:absolute;left:-20px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--kirmizi);box-shadow:0 0 0 3px var(--kirmizi-w)}
.hk-cizgi .yil,.hk-rozet .yil{display:block;font-family:var(--fd);font-size:12.6px;font-weight:700;letter-spacing:.08em;color:var(--kirmizi-d)}
.hk-cizgi b,.hk-rozet b{display:block;font-family:var(--fd);font-size:16.4px;font-weight:600;color:var(--ink);margin-top:3px;line-height:1.35}
.hk-cizgi .kurum,.hk-rozet li span:last-child{display:block;font-size:14.4px;color:var(--mut);margin-top:2px;line-height:1.5}
.hk-rozet li{padding:12px 0;border-bottom:1px solid var(--line)}
.hk-rozet li:last-child{border-bottom:0}
/* ============ 12 · İÇERİK KARTLARI, PODCAST, HEKİM KARTI, VİDEOLAR ============ */
/* --- ortak kart --- */
.kart{
background:var(--paper);border:1px solid var(--line);border-radius:6px;
box-shadow:0 1px 2px rgba(8,47,83,.04),0 8px 26px rgba(8,47,83,.05);
padding:clamp(20px,2.6vw,34px);margin-bottom:22px;
}
.kart-bas{
display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:12.4px;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;color:var(--kirmizi-d);
padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.kart-bas svg{width:17px;height:17px;flex:none}
.kart .pg-metin > h2:first-child,.kart .pg-metin > h3:first-child{margin-top:0}
.kart .sss-liste{margin-top:0;border-top:0}
/* sık sorulanlar kartında ilk sorunun üstünde çizgi durmaz */
.kart-bas:has(+ .sss-liste){padding-bottom:0;border-bottom:0;margin-bottom:6px}
/* --- sesli anlatım (Spotify oynatıcısı) --- */
.pod{margin-bottom:22px;border-radius:12px;overflow:hidden;line-height:0}
.pod iframe{display:block;width:100%;border:0;border-radius:12px}
/* --- yan sütun hekim kartı --- */
.bio{
background:var(--paper);border:1px solid var(--line);border-radius:6px;
box-shadow:0 1px 2px rgba(8,47,83,.04),0 8px 26px rgba(8,47,83,.05);
padding:22px 20px 20px;margin-bottom:16px;text-align:center;
}
.bio-foto{margin:0 0 16px}
.bio-foto img{width:100%;max-width:228px;margin-inline:auto;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:8px;display:block}
.bio-ad{font-family:var(--fd);font-size:20px;font-weight:600;line-height:1.25;color:var(--base)}
.bio-metin{font-size:14.6px;line-height:1.62;color:var(--ink);margin-top:9px}
.bio-sosyal{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.bio-sosyal .bs{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .18s,filter .18s}
.bio-sosyal .bs svg{width:19px;height:19px}
.bio-sosyal .bs:hover{transform:translateY(-2px);filter:brightness(1.08)}
.bs-facebook{background:#1877F2}
.bs-youtube{background:#FF0000}
.bs-linkedin{background:#0A66C2}
.bs-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.bs-spotify{background:#1DB954}
.bs-x{background:#0F1419}
/* Tek dugme kalinca (orn. WhatsApp tanimli degilse) yarim sutunda oksuz
duruyordu; auto-fit bos sutunu toplar, dugme ortalanip tam genislige yayilir. */
.bio-dugmeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px;justify-items:stretch}
.bio-btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:6px;
font-family:var(--fd);font-size:14.2px;font-weight:600;color:#fff;padding:12px 10px;
transition:background .18s,transform .18s;
}
.bio-btn svg{width:17px;height:17px;flex:none}
.bio-btn:hover{transform:translateY(-1px)}
.bio-randevu{background:var(--kirmizi-d)}
.bio-randevu:hover{background:#6f5729}
.bio-wa{background:#0D7C3C;color:#fff}
.bio-wa:hover{background:#0a6631}
@media (max-width:980px){
.bio-foto img{max-width:190px}
.bio-dugmeler{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
/* --- video listesi (grid) --- */
.vd-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2.2vw,26px)}
.vd-kart{
background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;
display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;
}
.vd-kart:hover{transform:translateY(-3px);border-color:var(--kirmizi-l);box-shadow:0 12px 30px rgba(8,47,83,.1)}
.vd-kapak{position:relative;margin:0;background:var(--d900);aspect-ratio:16/9;overflow:hidden}
.vd-kapak img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.vd-kart:hover .vd-kapak img{transform:scale(1.045)}
.vd-oynat{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:56px;height:56px;border-radius:50%;background:rgba(204,26,13,.94);
display:grid;place-items:center;color:#fff;transition:transform .22s var(--ease),background .22s;
}
.vd-oynat svg{width:22px;height:22px;margin-left:3px}
.vd-kart:hover .vd-oynat{background:var(--kirmizi-d);transform:translate(-50%,-50%) scale(1.08)}
.vd-govde{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.vd-govde b{font-family:var(--fd);font-size:16.6px;font-weight:600;line-height:1.34;color:var(--ink)}
.vd-govde p{font-size:14.2px;line-height:1.62;color:var(--mut)}
.vd-izle{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-size:13.6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kirmizi-d)}
.vd-izle svg{width:15px;height:15px;transition:transform .2s}
.vd-kart:hover .vd-izle svg{transform:translateX(3px)}
/* --- video detay --- */
.vd-oynatici{position:relative;aspect-ratio:16/9;background:var(--d950);border-radius:6px;overflow:hidden;margin-bottom:20px;cursor:pointer}
.vd-oynatici img{width:100%;height:100%;object-fit:cover;display:block}
.vd-oynatici iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-oynatici .vd-oynat{width:74px;height:74px;background:rgba(204,26,13,.95)}
.vd-oynatici .vd-oynat svg{width:28px;height:28px}
.vd-oynatici:hover .vd-oynat{transform:translate(-50%,-50%) scale(1.07)}
.vd-yan .vd-kk{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.vd-yan .vd-kk:last-child{border-bottom:0}
.vd-yan .vd-kk img{width:92px;height:52px;object-fit:cover;border-radius:4px;flex:none}
.vd-yan .vd-kk span{font-size:14px;line-height:1.45;color:var(--ink2)}
.vd-yan .vd-kk:hover span{color:var(--kirmizi-d)}
/* --- bölüm ızgarası: alt başlıklar ve kendi sayfaları --- */
.bol-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,2vw,24px);margin-bottom:24px}
.bol-sut{
background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px 20px 16px;
box-shadow:0 1px 2px rgba(8,47,83,.04);display:flex;flex-direction:column;
transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);
}
.bol-sut:hover{border-color:var(--kirmizi-l);box-shadow:0 12px 30px rgba(8,47,83,.09);transform:translateY(-2px)}
.bol-sut > h2{
display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:12.8px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--kirmizi-d);
padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line);
}
.bol-sut > h2 a{display:flex;align-items:center;gap:9px}
.bol-sut > h2 svg{width:17px;height:17px;flex:none;color:var(--kirmizi)}
.bol-sut ul{display:flex;flex-direction:column;gap:1px}
.bol-sut li a{
display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.45;color:var(--mut);
padding:7px 9px;border-radius:var(--r);transition:background .16s,color .16s;
}
.bol-sut li a svg{width:16px;height:16px;flex:none;color:var(--d300);transition:color .16s,transform .16s}
.bol-sut li a:hover{background:var(--d50);color:var(--base)}
.bol-sut li a:hover svg{color:var(--kirmizi);transform:scale(1.1)}
.bol-ozet{font-size:14.4px;line-height:1.62;color:var(--mut)}
.bol-tum{
margin-top:auto;padding-top:13px;display:inline-flex;align-items:center;gap:7px;
font-family:var(--fd);font-size:13.4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--kirmizi-d);
}
.bol-sut ul + .bol-tum,.bol-ozet + .bol-tum{margin-top:14px;border-top:1px solid var(--line)}
.bol-tum svg{width:15px;height:15px;transition:transform .2s}
.bol-sut:hover .bol-tum svg{transform:translateX(3px)}
/* --- tanı ve tahlil listesi ---
Önceki düzen 4 sütunluk kart ızgarasıydı; kategorilerin öge sayısı sütuna
bölünmediği için her kategorinin altında tek kartlık kırık satırlar kalıyordu.
Artık her kategori kendi panelinde ve ögeler iki sütuna akan satırlar hâlinde. */
.tn{padding-block:clamp(26px,3.4vw,46px)}
/* üstte kategorilere atlayan şerit; sayfa uzun olduğu için yapışkan */
.tn-gez{position:sticky;top:64px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;
padding:12px;margin-bottom:clamp(20px,2.4vw,30px);
background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
border:1px solid var(--line);border-radius:10px}
.tn-gez a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
border:1px solid var(--line2);font-size:13.6px;font-weight:600;color:var(--ink2);
transition:border-color .18s,color .18s,background .18s}
.tn-gez a:hover{border-color:var(--kirmizi);color:var(--kirmizi-d);background:var(--kirmizi-w)}
.tn-gez svg{width:14px;height:14px;flex:none;color:var(--kirmizi)}
.tn-kutu{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
margin-bottom:clamp(16px,1.8vw,24px);scroll-margin-top:130px}
.tn-kutu > header{display:flex;align-items:center;gap:12px;padding:15px 20px;
border-bottom:1px solid var(--line);background:var(--d50)}
.tn-sim{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;
background:var(--kirmizi-w);color:var(--kirmizi-d)}
.tn-sim svg{width:17px;height:17px}
.tn-kutu > header h2{font-size:clamp(17px,1.9vw,21px);font-weight:700;color:var(--ink);letter-spacing:-.004em}
.tn-say{margin-left:auto;flex:none;min-width:26px;padding:3px 9px;border-radius:999px;
background:var(--d100);color:var(--mut);font-size:12.6px;font-weight:700;text-align:center}
/* iki sütuna akan satırlar: sütun sayısı sabit olduğu için kırık satır oluşmaz */
.tn-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
.tn-liste li{border-bottom:1px solid var(--line)}
/* sağ sütunda ayırıcı çizgi */
.tn-liste li:nth-child(odd){border-right:1px solid var(--line)}
/* Öge sayısı tekse sonuncusu iki sütunu birden kaplar; yoksa sağda boş göz kalır
(özellikle tek yazılı gruplarda panelin yarısı boş görünüyordu). */
.tn-liste li:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
/* son satırın alt çizgisi panelin kenarlığıyla çakışır */
.tn-liste li:last-child,.tn-liste li:nth-last-child(2):nth-child(odd){border-bottom:0}
/* Sütunlar: konu ikonu · ad ve özet · ok */
.tn-liste a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;
padding:13px 18px;height:100%;transition:background .18s,padding-left .2s}
.tn-liste a:hover{background:var(--d50);padding-left:22px}
/* Her satırın başındaki ikon; adın anlamına göre seçilir (bkz. simgeAdi) */
.tn-oge-sim{grid-row:1/-1;grid-column:1;width:30px;height:30px;flex:none;display:grid;place-items:center;
border-radius:8px;background:var(--kirmizi-w);color:var(--kirmizi-d);transition:background .18s}
.tn-oge-sim svg{width:16px;height:16px}
.tn-liste a:hover .tn-oge-sim{background:#fff}
.tn-ad{grid-column:2;font-size:15.4px;font-weight:600;color:var(--ink);line-height:1.4}
.tn-ozet{grid-column:2;font-size:13.4px;color:var(--mut);line-height:1.5}
.tn-ok{grid-row:1/-1;grid-column:3;width:15px;height:15px;flex:none;color:var(--kirmizi);
opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .2s}
.tn-liste a:hover .tn-ok{opacity:1;transform:none}
.tn-not{display:flex;gap:11px;align-items:flex-start;margin-top:22px;padding:15px 18px;
border:1px solid var(--line);border-left:3px solid var(--kirmizi);border-radius:8px;
background:var(--d50);font-size:14.4px;line-height:1.62;color:var(--ink2)}
.tn-not svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--kirmizi)}
@media (max-width:860px){
.tn-liste{grid-template-columns:1fr}
.tn-liste li:nth-child(odd){border-right:0}
}
@media (max-width:560px){
.tn-gez{position:static;padding:10px}
.tn-gez a{font-size:12.8px;padding:6px 11px}
}
/* 560px altında sola yaslama kaldırıldı: metin mobilde de iki yana yaslanır (kullanıcı isteği). */
/* bölüm sayfasında yalnız alt başlık kartları */
.bol-kart{display:flex;flex-direction:column;gap:10px;padding:26px 24px 20px;text-align:left}
.bol-kart-sim{width:46px;height:46px;border-radius:12px;background:var(--kirmizi-w);display:grid;place-items:center;margin-bottom:2px}
.bol-kart-sim svg{width:23px;height:23px;color:var(--kirmizi-d)}
.bol-kart h2{
display:block;font-family:var(--fd);font-size:19.5px;font-weight:600;line-height:1.3;
letter-spacing:0;text-transform:none;color:var(--ink);border:0;padding:0;margin:0;
}
.bol-kart .bol-ozet{font-size:14.8px;line-height:1.62}
.bol-kart .bol-tum{border-top:1px solid var(--line);width:100%}
/* sayfa başlığındaki tür rozeti */
.pg-ust{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.pg-ust .eyebrow{margin-bottom:0}
.pg-tur{
display:inline-flex;align-items:center;font-family:var(--fd);font-size:11.4px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:20px;
background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);
}
.pg-tur.t-hastalik{background:rgba(194,160,89,.26);border-color:rgba(194,160,89,.55);color:#F2E2BE}
.pg-tur.t-tedavi {background:rgba(45,190,120,.22);border-color:rgba(120,225,175,.45);color:#C9F5DF}
.pg-tur.t-ameliyat{background:rgba(120,150,255,.22);border-color:rgba(155,180,255,.45);color:#DCE4FF}
.pg-tur.t-tani {background:rgba(165,140,215,.22);border-color:rgba(190,170,235,.45);color:#E4DCF7}
.pg-tur.t-kategori{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#D8E4F0}
/* --- bölüm sayfası: konu kümeleri ve tedavi kartları --- */
/* Bölüm sayfasındaki kümeler, tahlil listesiyle aynı panel düzenini kullanır.
Kart ızgarası, küme başına öge sayısı sütuna bölünmediği için altta tek
kartlık kırık satırlar bırakıyordu (tek ögeli kümelerde satırın üçte biri). */
.bol-kume{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
margin-bottom:clamp(14px,1.6vw,20px)}
.bol-kume-bas{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:14px 18px;border-bottom:1px solid var(--line);background:var(--d50);
}
.bol-kume-bas h2{
display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:13.4px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--kirmizi-d);
}
.bol-kume-bas h2 svg{width:17px;height:17px;flex:none;color:var(--kirmizi)}
.bol-kume-bas .bol-tum{margin:0 0 0 auto;padding:0;border:0;flex:none}
/* Tek satira sigmayip alt satira dusen baslik: ikisi de ortalanir.
`.sarmali` sinifini site.js olcerek koyar; CSS tek basina bir ogenin
sarmalandigini bilemez. */
.bol-kume-bas.sarmali{justify-content:center}
.bol-kume-bas.sarmali h2{justify-content:center;text-align:center;flex:1 1 100%}
.bol-kume-bas.sarmali .bol-tum{margin:0 auto}
.bol-kartlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.bol-kartlar + .kart{margin-top:clamp(18px,2.2vw,26px)}
.bol-oge{
display:flex;align-items:center;gap:11px;padding:13px 17px;
border-bottom:1px solid var(--line);transition:background .18s,padding-left .2s;
}
.bol-oge:nth-child(odd){border-right:1px solid var(--line)}
/* öge sayısı tekse sonuncusu iki sütunu kaplasın, sağda boş göz kalmasın */
.bol-oge:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.bol-oge:last-child,.bol-oge:nth-last-child(2):nth-child(odd){border-bottom:0}
.bol-oge:hover{background:var(--d50);padding-left:21px}
.bol-oge-sim{
flex:none;width:30px;height:30px;border-radius:8px;background:var(--kirmizi-w);
display:grid;place-items:center;transition:background .18s;
}
.bol-oge-sim svg{width:16px;height:16px;color:var(--kirmizi-d)}
.bol-oge:hover .bol-oge-sim{background:var(--kirmizi-l)}
.bol-oge b{font-family:var(--fd);font-size:15px;font-weight:600;line-height:1.36;color:var(--ink)}
.bol-oge:hover b{color:var(--kirmizi-d)}
/* yan sütun yüzünden içerik dar; tek sütuna erken düşer */
@media (max-width:1240px){
.bol-kartlar{grid-template-columns:1fr}
.bol-oge:nth-child(odd){border-right:0}
}
@media (max-width:560px){
.bol-kartlar{grid-template-columns:1fr}
/* ⚠ Burada `flex-direction:column` duruyordu; `.pg-tam` kuralindaki
`align-items:center` ile birlesince basligi ortaliyor ama "Tumunu gor"u
`margin-left:auto` ile sagda birakiyordu. Satir duzeni korunur: sigan
baslik solda kalir, sigmayani JS `.sarmali` ile ortalar. */
.bol-kume-bas{gap:8px 12px}
}
/* =========================================================================
EKLER — panelden üretilen ikonlar, iç sayfa düzeltmeleri
========================================================================= */
svg.mi{width:16px;height:16px;flex:none}
.menu .mi{width:16px;height:16px}
.mcols .ic svg{width:19px;height:19px}
.qi .qc svg{width:21px;height:21px}
.qi .qbg{width:74px;height:74px}
.cvgrid .cvbg{width:52px;height:52px}
.bol-oge-sim svg,.tn-sim svg,.yan-kutu li a svg,.bol-kart .ic svg{width:17px;height:17px}
.atla{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:10px 16px;z-index:200;
border-radius:0 0 8px 0}
.atla:focus{left:0}
.mfeat-yazi{display:flex;align-items:flex-end;min-height:150px;background:linear-gradient(150deg,var(--navy),var(--navy-d));
border-radius:var(--rs);padding:18px;color:#fff}
.mfeat-yazi .fi{position:static;padding:0}
.pg-hero{background:var(--mist);border-bottom:1px solid var(--line)}
.pg-hero h1,.pg-hero .pg-tur,.pg-hero .pg-ust,.pg-hero p{color:var(--ink)}
.pg-hero .pg-tur{color:var(--gold)}
.pg-kart,.kart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-s)}
.pg-metin a,.icerik a,.yazi-metin a{color:var(--gold)}
.btn-solid{background:var(--gold-fill);color:#fff;border:1px solid var(--gold-fill)}
.btn-solid:hover{background:var(--gold);color:#fff}
.sss-liste details[open]{border-color:rgba(204,26,13,.32)}
footer .hours span:last-child{color:#fff}
/* ---- yazı tipleri: başlık ve gövde (panelden değil, buradan yönetilir) ---- */
h1,h2,h3,h4,h5,h6,.brand .nm,.eyebrow,.btn,.mgroups h4,.tkol h3,.qi b,.meth h3,.card h3,.post h3,
.fbrand b,footer h4,.hslide .tag,.hslide .hbaslik,.pg-hero h1,.kart-bas h2,.sss summary,.sss-liste summary,.mtum,
.bol-kume-bas h2,.tn-ad,.yan-kutu h3{font-family:"Outfit","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif}
body,p,li,input,select,textarea,button,.menu,.icerik,.pg-metin{font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif}
h1,h2,h3,h4{letter-spacing:-.018em}
.brand .nm{letter-spacing:-.01em}
/* ---- alt bilgi sütunları: daha ferah ---- */
.fmain > div{min-width:0}
footer ul{gap:12px;font-size:15px}
footer ul a{display:inline-block;line-height:1.45}
@media (min-width:1101px){
.fmain{grid-template-columns:minmax(230px,.9fr) repeat(3,minmax(230px,1fr))}
}
/* =========================================================================
SİYAH + KIRMIZI — koyu yüzeyler ghost siyah, vurgular canlı kırmızı.
Kural: siyah zeminde birincil düğme KIRMIZI, metin beyaz, ikincil metin gri;
kırmızı yalnız vurgu olarak kullanılır (çizgi, etiket, düğme, ışıma).
========================================================================= */
.sec.dark{background:
radial-gradient(1100px 520px at 12% -10%, rgba(194,160,89,.22), transparent 62%),
radial-gradient(900px 480px at 92% 110%, rgba(194,160,89,.14), transparent 60%),
linear-gradient(168deg,#1d1d24 0%,#16161b 55%,#141419 100%);
border-block:1px solid rgba(194,160,89,.28)}
.sec.dark .eyebrow{color:#c2a059}
.sec.dark .eyebrow::before{background:#8a6f37}
.sec.dark .head p,.sec.dark p{color:#c3c3cb}
.sec.dark .btn-gold{background:#8a6f37;color:#fff;box-shadow:0 14px 34px -18px rgba(194,160,89,.9)}
.sec.dark .btn-gold:hover{background:#d9202d;color:#fff}
.sec.dark .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.sec.dark .btn-ghost:hover{border-color:#8a6f37;background:rgba(194,160,89,.14);color:#fff}
.sec.dark .tkol h3{color:#fff;border-bottom-color:rgba(194,160,89,.55)}
.sec.dark .tkol a{color:#d6d7de;border-bottom-color:rgba(255,255,255,.1)}
.sec.dark .tkol a span{color:#94949e}
.sec.dark .tk-sim{background:rgba(255,255,255,.07);color:#c2a059}
.sec.dark .tkol a:hover .tk-sim{background:rgba(194,160,89,.16)}
.sec.dark .tkol a:hover{color:#c2a059}
.sec.dark .lawnote{background:rgba(255,255,255,.04);border-left-color:#8a6f37;color:#b9bac3}
.sec.dark .sss details{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.sec.dark .sss details[open]{border-color:rgba(194,160,89,.45);background:rgba(194,160,89,.07)}
.sec.dark .sss summary{color:#fff}
.sec.dark .sss summary::after{border-color:#c2a059}
.sec.dark .sss .ans{color:#c3c3cb}
.topline{background:#141419;color:#b9bac3;border-bottom:1px solid rgba(194,160,89,.35)}
.topline a:hover{color:#c2a059}
.topline .tel{color:#fff}
footer{background:linear-gradient(178deg,#1a1a20 0%,#121217 62%,#0f0f13 100%);
border-top:3px solid #8a6f37}
footer a{color:#b9bac3}
footer ul a:hover{color:#c2a059}
footer h4{color:#fff}
footer h4 .mi{color:#8a6f37}
footer .legal{color:#94949e}
.fbrand .em{background:#8a6f37;border-color:#8a6f37;color:#fff}
.fbot{border-top-color:rgba(255,255,255,.1);color:#94949e}
.fbot .lks a:hover{color:#c2a059}
.fsoc a{border-color:rgba(255,255,255,.18);color:#d6d7de}
.fsoc a:hover{background:#8a6f37;border-color:#8a6f37;color:#fff}
.hcard{background:linear-gradient(152deg,rgba(22,22,28,.86) 0%,rgba(8,8,11,.92) 72%);
border:1px solid rgba(255,255,255,.14);border-left:3px solid #8a6f37;
box-shadow:0 34px 80px -44px rgba(0,0,0,.95)}
.hslide .tag{background:rgba(194,160,89,.16);border-color:rgba(194,160,89,.55);color:#d8bb79}
.hslide p{color:#c9cad2}
.hslide .hl{color:#c2a059}
.hcard .btn-gold,.rbox .btn-gold,.vbox .btn-gold,.yan-iletisim .btn-solid{background:#8a6f37;color:#fff}
.hcard .btn-gold:hover,.rbox .btn-gold:hover,.vbox .btn-gold:hover,
.yan-iletisim .btn-solid:hover{background:#d9202d;color:#fff}
.hcard .btn-out{border-color:rgba(255,255,255,.4);color:#fff}
.hcard .btn-out:hover{background:rgba(194,160,89,.16);border-color:#8a6f37}
.hdots button{background:rgba(255,255,255,.28)}
.hdots button[aria-current="true"]{background:#8a6f37}
.harrows button,.rnav{border-color:rgba(255,255,255,.28);background:rgba(10,10,14,.5);color:#fff}
.harrows button:hover,.rnav:hover{background:#8a6f37;border-color:#8a6f37}
.rbox{background:linear-gradient(152deg,rgba(22,22,28,.88) 0%,rgba(8,8,11,.94) 72%);
border-left:3px solid #8a6f37}
.rbox .rk{color:#c2a059}
.vc{background:linear-gradient(180deg,rgba(10,10,14,0),rgba(8,8,11,.94))}
.totop{background:#8a6f37;border-color:#8a6f37;color:#fff}
.totop:hover{background:#c2a059}
.wafab{box-shadow:0 18px 38px -18px rgba(0,0,0,.8)}
.yan-iletisim{background:linear-gradient(160deg,#1d1d24,#141419);border-color:rgba(194,160,89,.3)}
.yan-iletisim h2{color:#c2a059}
/* açık bölümlerde kırmızı vurgu: başlık altı çizgisi ve etiketler */
.pg-hero{background:linear-gradient(120deg,#f7f7f9 0%,#f1f1f4 58%,#ececef 100%);
border-bottom:1px solid #e4e4e9}
.pg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:linear-gradient(90deg,#8a6f37,rgba(194,160,89,0))}
.eyebrow{color:#8a6f37}
.quick .qi:hover{border-color:rgba(194,160,89,.4)}
/* Menü tam ortada: iki yan sütun AYNI en az genişliğe sahip, böylece orta sütun
sayfanın tam ortasında kalır ve marka/düğme menünün altına binmez. */
.nav-sag{display:flex;justify-content:flex-end;align-items:center}
@media (min-width:1241px){
/* Menü çubuğu diğer bölümlerden biraz geniş: ikonlu menü 1280'e sığmıyordu. */
.nav .wrap{max-width:1480px}
}
@media (min-width:1241px) and (max-width:1380px){
/* dar masaüstünde alt satır iki satıra düşüyordu; gizlenir */
.brand .sb{display:none}
}
/* alt bilgi de menü çubuğu kadar geniş: üç bağlantı sütunu daralmasın */
footer > .wrap,.fbot{max-width:1480px}
footer ul a{line-height:1.5}
@media (min-width:1241px){footer > .wrap{max-width:1480px}}
/* =========================================================================
BÖLÜM VE LİSTE SAYFALARI — yan sütunsuz, görselli kart ızgarası
========================================================================= */
.pg-tam{display:block;max-width:1480px}
.pg-tam > div{min-width:0}
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(14px,1.6vw,22px)}
/* Liste sayfalarinda govde karti izgaranin hemen altina yapisiyordu; bolum
sayfalarindaki ayrimla ayni nefes payi verilir. */
.izgara + .kart,.pg-liste + .kart{margin-top:clamp(26px,3.2vw,52px)}
.iz-kart{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s);text-decoration:none;color:inherit;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.iz-kart:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(194,160,89,.35)}
.iz-kart .gor{position:relative;display:block;aspect-ratio:16/10;background:var(--mist);overflow:hidden}
.iz-kart .gor img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.iz-kart:hover .gor img{transform:scale(1.05)}
.iz-kart .sim{position:absolute;inset:0;display:grid;place-items:center;
background:linear-gradient(150deg,var(--mist),var(--mist-2));color:var(--gold)}
.iz-kart .sim svg{width:40px;height:40px;opacity:.85}
.iz-kart .gv{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px;flex:1}
.iz-kart h3{font-size:17.2px;line-height:1.28;letter-spacing:-.01em}
.iz-kart .md{font-size:12.8px;color:var(--gold);font-weight:600}
.iz-kart p{font-size:14px;color:var(--muted);line-height:1.6}
.iz-kart .go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;
font-size:13.6px;font-weight:600;color:var(--gold)}
.iz-kart:hover .go{gap:11px}
.pg-tam .bol-kume{margin-bottom:clamp(30px,3.6vw,52px)}
.pg-tam .bol-kume-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pg-tam .bol-kume-bas h2{display:flex;align-items:center;gap:10px;font-size:clamp(19px,2.2vw,24px)}
.pg-tam .bol-kume-bas h2 svg{width:20px;height:20px;color:var(--gold)}
.pg-tam .kart{max-width:none}
@media (max-width:560px){.izgara{grid-template-columns:1fr}}
/* =========================================================================
MEGA MENÜ — 4x2 ikonlu kart ızgarası (uzun liste yerine)
========================================================================= */
.mega-in{max-width:1480px;margin-inline:auto;display:block;
padding:clamp(20px,2.2vw,30px) clamp(20px,3vw,48px) clamp(16px,1.8vw,22px)}
.mfeat,.mfeat-yazi{display:none}
.mizgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mkart{display:grid;grid-template-columns:42px minmax(0,1fr) 16px;align-items:center;gap:13px;
padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.mkart:hover{border-color:rgba(194,160,89,.45);background:var(--gold-w);transform:translateY(-2px)}
.mkart .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
background:var(--gold-w);color:var(--gold);border:1px solid rgba(194,160,89,.16);transition:background .2s,color .2s}
.mkart:hover .ic{background:var(--gold-fill);color:#fff;border-color:var(--gold-fill)}
.mkart .ic svg{width:20px;height:20px}
.mk-gv{min-width:0}
.mkart b{display:block;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.mkart .mk-gv span{display:block;font-size:12.6px;color:var(--muted);line-height:1.42;margin-top:3px;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk-ok{color:var(--line-d);transition:color .2s,transform .2s}
.mkart:hover .mk-ok{color:var(--gold);transform:translateX(3px)}
.mega-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mega-alt p{font-size:13.8px;color:var(--muted);max-width:80ch;margin:0}
.mega-alt .btn{padding:10px 18px;font-size:14.2px}
@media (max-width:1439px){.mizgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1240px){
.mizgara{grid-template-columns:1fr;gap:6px}
.mkart{border:0;border-radius:10px;padding:11px 8px}
.mkart:hover{transform:none}
.mega-in{padding:0 0 12px}
.mega-alt{border-top:0;padding-top:6px;margin-top:8px}
.mega-alt p{display:none}
.mega-alt .btn{width:100%;justify-content:center}
}
/* dört hızlı kart: dar ekranda ikişerli, telefonda tek sıra */
@media (max-width:1000px){.quick .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.quick .grid{grid-template-columns:1fr}}
/* ============ MOBİL EYLEM ÇUBUĞU ============
Telefonda sayfanın altında duran yüzen çubuk: Anasayfa, Hemen Ara,
WhatsApp, Randevu Al ve Menü. Bölümlere menü düğmesinden açılan
çekmeceyle gidilir.
Çubuk sabittir: sayfa kaydırılırken yerinde durur. Hareketleri: ilk
açılışta aşağıdan süzülür, çekmece açılınca iner, birincil eylem
(Randevu) yumuşak bir nabızla vurgulanır, dokunuşta simge küçülür. */
.mobnav{display:none}
@media (max-width:860px){
.mobnav{
display:block;position:fixed;z-index:160;
left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
bottom:calc(12px + env(safe-area-inset-bottom));
padding:7px;border-radius:var(--pill);
background:linear-gradient(145deg,rgba(38,38,42,.96) 0%,rgba(15,15,17,.97) 100%);
border:1px solid rgba(194,160,89,.28);
box-shadow:0 18px 40px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
transform:translateY(0);
transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s;
}
@supports (backdrop-filter:blur(10px)){
.mobnav{background:linear-gradient(145deg,rgba(38,38,42,.82) 0%,rgba(15,15,17,.88) 100%);backdrop-filter:blur(14px) saturate(130%)}
}
/* çekmece açıkken çubuk perdenin altında kalmasın, tümden insin */
body.menu-acik .mobnav{transform:translateY(calc(100% + 26px));opacity:0}
/* ilk açılışta aşağıdan süzülür */
/* ⚠ `both` yerine `backwards`: `both` bittiginde son kareyi (transform:none)
kalici kilar ve animasyonlar normal bildirimleri ezdigi icin .gizli ile
cekmece acikken verilen transform'lar calismaz olur. */
.mobnav.giris{animation:mnGiris .6s .25s cubic-bezier(.22,1,.36,1) backwards}
@keyframes mnGiris{from{transform:translateY(calc(100% + 26px));opacity:0}to{transform:none;opacity:1}}
.mobnav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;position:relative;z-index:1}
.mobnav li{flex:0 0 auto;min-width:0}
.mobnav a,.mn-menu{
display:flex;align-items:center;justify-content:center;gap:0;
width:100%;min-width:46px;height:46px;padding:0 13px;
border:0;background:none;cursor:pointer;
color:#b5b2a9;text-decoration:none;border-radius:var(--pill);
font-family:var(--fd);font-size:13.4px;font-weight:600;white-space:nowrap;
transition:color .3s, gap .36s cubic-bezier(.22,1,.36,1), padding .36s cubic-bezier(.22,1,.36,1);
-webkit-tap-highlight-color:transparent;
}
.mobnav .mn-sim{display:grid;place-items:center;flex:none;width:21px;height:21px}
.mobnav .mn-sim svg{width:21px;height:21px;display:block;transition:transform .42s cubic-bezier(.34,1.56,.64,1)}
/* ad, etkin olmayanlarda genişliği sıfıra iner; okunmaması için görsel olarak kapanır */
.mobnav .mn-ad{
max-width:0;overflow:hidden;opacity:0;
transition:max-width .4s cubic-bezier(.22,1,.36,1), opacity .26s;
}
/* Randevu birincil eylemdir: adı hep açık, zemini altın. */
.mobnav .birincil{color:#fff;gap:8px;padding:0 15px;background:var(--gold-fill);box-shadow:0 2px 12px -4px rgba(194,160,89,.8)}
.mobnav .birincil .mn-ad{max-width:160px;opacity:1}
.mobnav .birincil .mn-sim svg{transform:scale(1.04)}
.mobnav .simdiki{color:var(--gold-l)}
.mobnav .mn-wa{color:#cfd8cf}
.mobnav a:active .mn-sim svg,.mn-menu:active .mn-sim svg{transform:scale(.84)}
/* Birincil eylem yumuşak bir nabızla kendini belli eder; gölge dışında
hiçbir şey hareket etmediği için metni okumayı zorlaştırmaz. */
.mobnav .birincil{animation:mnNabiz 3.6s ease-in-out 1.2s infinite}
@keyframes mnNabiz{
0%,100%{box-shadow:0 2px 12px -4px rgba(194,160,89,.8)}
50%{box-shadow:0 2px 20px -2px rgba(194,160,89,.95)}
}
.mobnav .mn-kisa{display:none}
/* Birincil dışındaki ögeler simge + küçük ad olarak durur. */
.mobnav li:not(.mn-birincil){flex:1 1 0}
.mobnav li:not(.mn-birincil) > a,.mobnav .mn-menu{
flex-direction:column;gap:3px;height:48px;padding:0 3px;min-width:0;
}
.mobnav li:not(.mn-birincil) .mn-sim,.mobnav li:not(.mn-birincil) .mn-sim svg{width:19px;height:19px}
.mobnav li:not(.mn-birincil) .mn-ad{
max-width:100%;opacity:1;font-size:9.6px;font-weight:600;letter-spacing:.01em;
overflow:hidden;text-overflow:ellipsis;line-height:1;
}
.mobnav .mn-birincil{flex:0 1 auto;min-width:0}
/* ⚠ Dar ekran kuralları, eşit özgüllükteki genel ögelerden SONRA durmalı;
önce yazıldığında font-size ve padding geri eziliyordu. */
@media (max-width:430px){
.mobnav .mn-uzun{display:none}
.mobnav .mn-kisa{display:inline}
.mobnav .birincil{padding:0 13px;gap:7px}
.mobnav li:not(.mn-birincil) .mn-ad{font-size:9px;letter-spacing:-.01em}
}
@media (max-width:375px){
.mobnav li:not(.mn-birincil) > a,.mobnav .mn-menu{padding:0 1px}
.mobnav li:not(.mn-birincil) .mn-ad{font-size:8.4px;letter-spacing:-.015em}
.mobnav .birincil{padding:0 11px}
}
@media (max-width:340px){
.mobnav li:not(.mn-birincil) .mn-ad{font-size:7.8px}
.mobnav .birincil{padding:0 9px;gap:6px}
}
/* çubuk sayfanın son satırını örtmesin */
body{padding-bottom:86px}
/* yüzen düğmeler çubuğun üstüne çıkar */
/* Çubuk: alt 12px + ~64px yükseklik = 76px; üstünde 10px boşluk kalır. */
.totop{bottom:calc(86px + env(safe-area-inset-bottom));width:44px;height:44px}
.wafab{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
.mobnav,.mobnav a,.mn-menu,.mn-ad,.mobnav .birincil,.mobnav .mn-sim svg{transition:none;animation:none}
}