/* Op. Dr. Kadir Berat Oyur — tasarım sistemi */
:root{
--bg:#FBFAF7; --surface:#FFFFFF; --sand:#F3EEE6; --sand-2:#EDE6DA;
--ink:#14161A; --ink-2:#3A3D42; --muted:#71716B; --line:#E5DFD4;
--accent:#17789B; --accent-2:#1E8CB3; --accent-soft:#E8F6FA;
--accent-bright:#67CBE3;
--brass:#A9784B;
--serif:"Fraunces",Georgia,"Times New Roman",serif;
--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--wrap:1180px; --r:14px;
--sh:0 1px 2px rgba(20,22,26,.04),0 8px 28px -12px rgba(20,22,26,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.28}
p{margin:0 0 1.05em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 40px,760px);margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.eyebrow.brass{color:var(--brass)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}
section{padding:clamp(64px,8vw,110px) 0}
.sec-head{max-width:64ch;margin-bottom:clamp(34px,4vw,56px)}
/* dizin sayfası başlığı h1 ama ölçüsü bölüm başlığı gibi */
.sec-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
/* ortalanmış bölüm başlığı */
.sec-head.orta{max-width:none;text-align:center;margin-bottom:clamp(26px,3vw,40px)}
.sec-head.orta .lead{max-width:58ch;margin-left:auto;margin-right:auto}
/* ---------- Header ---------- */
.topbar{background:var(--accent);color:#EAF0EC;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar a{text-decoration:none;opacity:.92}
.topbar .tb-l i{font-style:normal}
.topbar a:hover{opacity:1;text-decoration:underline}
.topbar .tb-r{display:flex;gap:20px;align-items:center}
header.site{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.88);
backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:0;min-height:86px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand .mark{width:38px;height:38px;flex:0 0 auto}
.brand b{font-family:var(--serif);font-size:1.12rem;font-weight:500;letter-spacing:-.01em;display:block;line-height:1.1}
.brand span{font-size:.665rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* nav satırı başlık genişliğini doldurur; dil seçici sağ kenara yaslanır.
Böylece menü sözcüklerinin uzunluğu ne olursa olsun sağda boşluk kalmaz. */
nav.main{margin-left:clamp(20px,3.5vw,52px);flex:1 1 auto;display:flex;align-items:center;gap:2px}
nav.main a{text-decoration:none;font-size:.925rem;color:var(--ink-2);padding:9px 13px;border-radius:8px;white-space:nowrap}
nav.main a:hover{background:var(--sand);color:var(--ink)}
nav.main a[aria-current]{color:var(--accent);font-weight:600}
.has-menu{position:relative}
.alt-ac{display:none}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
width:min(92vw,720px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:20px;opacity:0;visibility:hidden;transition:.18s ease;
display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:block;padding:9px 11px;font-size:.9rem;border-radius:8px}
.mega a small{display:block;color:var(--muted);font-size:.775rem;line-height:1.35;margin-top:1px}
.lang{display:flex;gap:2px;margin-left:auto;border-left:1px solid var(--line);padding-left:18px}
.lang a{font-size:.8rem;padding:6px 8px;letter-spacing:.02em;color:var(--muted)}
.lang a.on{color:var(--ink);font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;
width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:1.6px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.6px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 26px;border-radius:100px;text-decoration:none;font-size:.94rem;font-weight:600;
border:1px solid transparent;cursor:pointer;transition:.16s ease;line-height:1}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-wa{background:#1FA855;color:#fff}
.btn-wa:hover{background:#178F47}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* ---------- Hero — tam kanama görsel + büyük tipografi ---------- */
.hero{position:relative;overflow:hidden;padding:0;
min-height:clamp(560px,calc(100svh - 124px),880px);
display:flex;flex-direction:column;justify-content:stretch}
/* görsel: sağ kenara kadar akar, tam yükseklik */
.hero-gorsel{position:absolute;top:0;right:0;bottom:0;width:45%;z-index:0;overflow:hidden}
.hero-gorsel picture{display:block;width:100%;height:100%}
.hero-gorsel img{display:block;width:100%;height:100%;
object-fit:cover;object-position:50% 32%}
/* sola doğru krem zemine yumuşak geçiş */
.hero-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to right,var(--bg) 0%,rgba(251,250,247,.72) 12%,rgba(251,250,247,0) 34%)}
/* açılış: her şey birlikte, yavaşça belirir */
/* üstüne gelince hafif yakınlaşma */
.hero-gorsel img{transition:transform 1.25s cubic-bezier(.2,.78,.24,1),
filter 1.25s ease}
.hero.acildi .hero-gorsel:hover img{transform:scale(1.11);filter:brightness(1.04) saturate(1.05)}
html.js .hero-gorsel,
html.js .hero-metin,
html.js .hero-serit{opacity:0;transform:translateY(20px)}
html.js .hero.acildi .hero-gorsel,
html.js .hero.acildi .hero-metin,
html.js .hero.acildi .hero-serit{opacity:1;transform:none;
transition:opacity 4s cubic-bezier(.19,.62,.22,1) .15s,
transform 4s cubic-bezier(.19,.62,.22,1) .15s}
@media(prefers-reduced-motion:reduce){
html.js .hero-gorsel,html.js .hero-metin,html.js .hero-serit{opacity:1;transform:none}
.hero.acildi .hero-gorsel:hover img{transform:none}
}
.hero .wrap{position:relative;z-index:1;width:min(100% - 40px,var(--wrap))}
/* içerik dikeyde ortalanır, şerit altta kendi yerinde durur */
.hero > .wrap{flex:1 1 auto;display:flex;align-items:center;
padding-block:clamp(32px,5vh,64px);
pointer-events:none} /* fare fotoğrafa ulaşabilsin */
.hero-metin{pointer-events:auto}
.hero-metin{max-width:min(52%,610px)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin-bottom:24px;letter-spacing:-.022em}
/* vurgu yalnızca renkle; yazı tipi değişmesin */
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:1.06rem;max-width:46ch}
.hero .btn-row{margin-top:32px}
/* alt şerit: ince, tam genişlik */
.hero-serit{position:relative;z-index:2;flex:0 0 auto;
border-top:1px solid var(--line);backdrop-filter:saturate(1.3) blur(10px);
background:rgba(251,250,247,.86)}
.hero-serit .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
width:min(100% - 40px,var(--wrap))}
.hero-serit div{padding:18px 22px 17px;border-left:1px solid var(--line);min-width:0;
display:flex;flex-direction:column}
.hero-serit div:first-child{border-left:0;padding-left:0}
/* İlk hücrenin sol dolgusu sıfır (yazı sayfa kenarından başlasın diye), bu da
logoyu 11px sağa kaydırıyordu. Yalnızca logoyu geri alıyoruz. */
.hero-serit .wrap > div:first-child .kurum-logo{transform:translateX(11px)}
.hero-serit .wrap > div:last-child .kurum-logo{transform:translateX(-11px)}
/* aşama etiketi (Tıp eğitimi / İhtisas öncesi …) */
.hero-serit i{display:block;font-style:normal;font-size:.78rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:7px}
.hero-serit b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:500;
line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.hero-serit span{display:block;font-size:.95rem;color:var(--muted);line-height:1.42;margin-top:6px}
@media(max-width:1100px){
.hero-metin{max-width:58%}
.hero-gorsel{width:42%}
}
@media(max-width:860px){
.hero{min-height:0;display:block;padding:0 0 0}
.hero-gorsel{position:relative;width:100%;height:min(56vh,460px)}
/* Telefonda ayrı bir dosya iniyor (…-mobil.jpg): soldaki kapı kasası kadraj
dışında, üstte baş payı var. Kutunun oranı dosyanınkine (900×920) yakın
olduğu için kırpma neredeyse sıfır; ortalamak yeterli. */
.hero-gorsel img{object-position:50% 50%}
.hero-gorsel::after{background:linear-gradient(to bottom,rgba(251,250,247,0) 55%,var(--bg) 100%)}
/* Giriş animasyonu mobilde takılıyordu: fotoğraf saydam başlıyor, 4 saniyelik
geçiş ekranda tamamlanmıyor, dokununca açılıyordu. Telefonda animasyon yok. */
html.js .hero-gorsel,html.js .hero-metin,html.js .hero-serit,
html.js .hero.acildi .hero-gorsel,html.js .hero.acildi .hero-metin,
html.js .hero.acildi .hero-serit{opacity:1;transform:none;transition:none}
.hero.acildi .hero-gorsel:hover img{transform:none}
.hero .wrap{padding-top:26px}
.hero-metin{max-width:none}
.hero-serit{margin-top:30px;background:none;backdrop-filter:none}
/* Mobilde tek sütun dev bir alan kaplıyordu; 2x2 ızgara.
Sütun dolguları eşit — eskiden tek/çift farkı kaymaya yol açıyordu. */
.hero .hero-serit .wrap{grid-template-columns:1fr 1fr;gap:0 16px}
.hero-serit div{padding:12px 0 13px;border-left:0;border-top:1px solid var(--line)}
.hero-serit div:first-child,.hero-serit div:nth-child(2){border-top:0;padding-top:4px}
.hero-serit i{font-size:.7rem;letter-spacing:.09em;margin-bottom:5px}
.hero-serit b{font-size:.92rem;line-height:1.22}
.hero-serit span{font-size:.86rem;margin-top:4px}
}
/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;
text-decoration:none;display:flex;flex-direction:column;transition:.18s ease}
a.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh)}
.card .tag{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:11px}
.card h3{margin-bottom:9px}
.card p{font-size:.925rem;color:var(--muted);margin:0}
.card .go{margin-top:16px;font-size:.86rem;font-weight:600;color:var(--accent)}
.card .go::after{content:" →"}
/* ---------- Sand band ---------- */
.band{background:var(--sand)}
.band-accent{background:linear-gradient(168deg,#1B88AE 0%,var(--accent) 62%);color:#E4F5FA}
.band-accent h2,.band-accent h3{color:#fff}
.band-accent .lead{color:rgba(228,245,250,.84)}
.band-accent .eyebrow{color:#A9E2F0}
/* ---------- Why / list ---------- */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.ticks li{position:relative;padding-left:31px;font-size:.97rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
background:var(--accent-soft);border:1px solid rgba(23,120,155,.22)}
.ticks li::after{content:"";position:absolute;left:5px;top:.72em;width:6px;height:3px;
border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);transform:rotate(-45deg)}
.band-accent .ticks li{color:rgba(228,245,250,.9)}
.band-accent .ticks li::before{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.band-accent .ticks li::after{border-color:#fff}
/* ---------- Timeline ---------- */
.tl{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 30px 30px}
.tl li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;
background:var(--bg);border:2px solid var(--accent)}
.tl b{display:block;font-size:1rem}
.tl .yr{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);font-weight:600}
.tl p{font-size:.9rem;color:var(--muted);margin:4px 0 0}
/* ---------- Treatment page ---------- */
.crumb{font-size:.82rem;color:var(--muted);padding:22px 0 0}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.t-hero{padding:26px 0 8px}
.t-hero h1{max-width:19ch;margin-bottom:20px}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:36px 0 0}
.spec div{background:var(--surface);padding:19px 20px}
.spec dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.spec dd{margin:0;font-family:var(--serif);font-size:1.08rem;line-height:1.25}
.prose{font-size:1.03rem;color:var(--ink-2)}
.prose h2{margin:52px 0 18px;font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose ol{padding-left:1.15em}
.stage{display:grid;grid-template-columns:170px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage b{font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--accent)}
.stage p{margin:0;font-size:.97rem}
details.faq{border-bottom:1px solid var(--line);padding:5px 0}
details.faq summary{cursor:pointer;padding:17px 34px 17px 0;font-weight:600;font-size:1.01rem;
list-style:none;position:relative;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.35rem;
font-weight:400;color:var(--accent);transition:.2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin:0 0 18px;font-size:.97rem;color:var(--ink-2);max-width:70ch}
.note{background:var(--sand);border-left:3px solid var(--brass);border-radius:0 10px 10px 0;
padding:20px 24px;font-size:.93rem;color:var(--ink-2)}
.note b{display:block;margin-bottom:5px;color:var(--ink)}
.note p:last-child{margin:0}
/* ---------- Form ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px);box-shadow:var(--sh)}
.field{margin-bottom:17px}
.field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.field label .req{color:#B4462F}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
border-radius:10px;font:inherit;font-size:.95rem;background:var(--bg);color:var(--ink);transition:.15s}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
background:var(--surface);box-shadow:0 0 0 3px rgba(23,120,155,.1)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.815rem;color:var(--muted);line-height:1.5;margin:6px 0 20px}
.consent input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.form-ok{display:none;background:var(--accent-soft);border:1px solid rgba(23,120,155,.25);color:var(--accent);
border-radius:10px;padding:15px 18px;font-size:.92rem;margin-bottom:18px}
/* ---------- Contact rows ---------- */
.crow{display:flex;gap:15px;align-items:flex-start;padding:19px 0;border-bottom:1px solid var(--line);text-decoration:none}
.crow:last-child{border-bottom:0}
.crow .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);flex:0 0 auto;
display:grid;place-items:center;color:var(--accent)}
.crow b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.crow span{font-size:1.02rem;color:var(--ink);display:block;margin-top:3px;line-height:1.4}
a.crow:hover span{color:var(--accent)}
.map{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--r);filter:grayscale(.25) contrast(1.03)}
/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#A7A9AD;padding:64px 0 30px;font-size:.9rem}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px}
footer.site h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:#fff;font-weight:600;margin:0 0 15px}
footer.site a{text-decoration:none;color:#A7A9AD;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .fbrand b{font-family:var(--serif);color:#fff;font-size:1.2rem;font-weight:500;display:block}
footer.site .fbrand p{margin:11px 0 0;max-width:34ch;font-size:.87rem;line-height:1.6}
/* Sağlık turizmi yetki rozeti — yönetmelik gereği HealthTürkiye logosu */
footer.site a.ht-rozet{display:inline-flex;align-items:center;gap:16px;text-decoration:none;
margin-top:clamp(30px,3.4vw,42px);padding:14px 20px 14px 16px;border-radius:12px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
transition:background .2s ease,border-color .2s ease}
footer.site a.ht-rozet:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
footer.site .ht-rozet img{flex:0 0 auto;height:44px;width:auto;display:block;
background:#fff;border-radius:6px;padding:5px 8px}
footer.site .ht-rozet span{display:block;min-width:0}
footer.site .ht-rozet b{display:block;color:#fff;font-size:.88rem;font-weight:600;line-height:1.3}
footer.site .ht-rozet i{display:block;font-style:normal;font-size:.74rem;color:#A7A9AD;margin-top:3px}
@media(max-width:760px){
footer.site a.ht-rozet{gap:12px;padding:12px 14px;margin-top:26px;width:100%}
footer.site .ht-rozet img{height:36px}
footer.site .ht-rozet b{font-size:.82rem}
footer.site .ht-rozet i{font-size:.7rem}
}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid #2A2D33;display:flex;
justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem;color:#77797E}
.disclaimer{background:#1A1C21;border-radius:10px;padding:16px 20px;font-size:.79rem;
line-height:1.6;color:#8A8C91;margin-top:38px}
/* ---------- Floating actions ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
box-shadow:0 8px 24px -6px rgba(20,22,26,.4);transition:.16s}
.fab a:hover{transform:scale(1.07)}
.fab .wa{background:#25D366;color:#fff}
.fab .tel{background:var(--accent);color:#fff}
.mobile-bar{display:none}
@media(max-width:960px){
.hero .wrap{grid-template-columns:1fr}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
.spec{grid-template-columns:repeat(2,1fr)}
footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
/* 87px'lik başlık satırı mobilde fazla yer kaplıyor, logoyla menü tuşu
arasında 323px boşluk bırakıyordu. Satır alçalınca boşluk da azalıyor. */
header.site .wrap{min-height:58px}
.brand .brand-logo img{height:42px}
.burger{width:40px;height:40px}
/* Alt bilgi mobilde çok uzuyordu: iki sütun + kısaltılmış tedavi listesi */
footer.site{padding:44px 0 26px}
footer.site .cols{grid-template-columns:1fr 1fr;gap:26px 20px}
footer.site .fbrand{grid-column:1/-1}
footer.site .fbrand p{max-width:none}
footer.site .mobil-gizle{display:none}
footer.site a{padding:6px 0}
footer.site .disclaimer{font-size:.72rem;line-height:1.5}
body{font-size:16px}
.burger{display:flex}
nav.main{position:fixed;inset:0 0 0 auto;width:min(84vw,330px);background:var(--surface);
flex-direction:column;align-items:stretch;padding:88px 20px 30px;gap:2px;
transform:translateX(101%);transition:.24s ease;box-shadow:-20px 0 50px -20px rgba(0,0,0,.3);overflow-y:auto}
nav.main.open{transform:none}
nav.main a{padding:13px 12px;font-size:1rem;border-bottom:1px solid var(--line);border-radius:0}
.mega{position:static;transform:none;opacity:1;visibility:visible;width:auto;border:0;box-shadow:none;
padding:0 0 0 12px;grid-template-columns:1fr;background:transparent;display:none}
.has-menu.open .mega{display:grid}
.mega a{font-size:.92rem;padding:11px 10px}
.mega a small{display:none}
.lang{border:0;padding:14px 0 0;margin:0}
/* Alt sabit barda Ara / WhatsApp / Randevu zaten var; üst barda
onları tekrarlamak yerine alt barın vermediği bilgiyi göster: konum. */
.topbar .tb-l{display:block;font-size:.76rem;opacity:.9}
.topbar .tb-l i{display:none}
.topbar .tb-r a[href^="https"]{display:none}
.topbar .wrap{gap:10px;min-height:34px;flex-wrap:nowrap}
.topbar .tb-r{font-size:.78rem;white-space:nowrap}
.stage{grid-template-columns:1fr;gap:6px}
.row2{grid-template-columns:1fr}
.g2,.g3,.g4{grid-template-columns:1fr}
.spec{grid-template-columns:1fr 1fr}
.fab{display:none}
.mobile-bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(0,0,0,.25)}
.mobile-bar a{padding:13px 6px;text-align:center;text-decoration:none;font-size:.76rem;font-weight:600;
color:var(--ink-2);display:grid;gap:4px;justify-items:center;border-right:1px solid var(--line)}
.mobile-bar a:last-child{border-right:0}
.mobile-bar a.wa{color:#178F47}
body{padding-bottom:60px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html.js .reveal{opacity:0;transform:translateY(14px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
/* Risk listeleri: onay işareti yerine nötr işaret */
.ticks.plain li::before{background:transparent;border-color:var(--line)}
.ticks.plain li::after{border:0;left:7px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--brass);transform:none}
/* Yatay taşma güvenliği */
html{overflow-x:hidden}
@media(max-width:760px){
.hero::after{display:none}
.wrap,.narrow{width:calc(100% - 32px)}
section[style*="grid-template-columns"]>*{min-width:0}
.wrap[style*="grid"]{grid-template-columns:1fr!important}
aside[style*="sticky"]{position:static!important}
}
.prose ul+p,.prose .stage+p{margin-top:1.4em}
.prose ul.ticks{margin:0 0 1.2em}
/* ============ Tedavi kartları — görselli ============ */
.tcard{padding:0;overflow:hidden}
.tcard .art{display:grid;place-items:center;height:138px;position:relative;
background:linear-gradient(150deg,var(--sand-2) 0%,var(--sand) 42%,#FBF8F3 100%);
border-bottom:1px solid var(--line);color:var(--accent);overflow:hidden}
.tcard .art svg{width:58px;height:58px;position:relative;z-index:1;
transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .3s;opacity:.9}
.tcard .tbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tcard .tbody .go{margin-top:auto;padding-top:16px}
a.tcard:hover .art svg{transform:translateY(-4px) scale(1.06);opacity:1}
a.tcard:hover .art{background:linear-gradient(150deg,var(--accent-soft) 0%,var(--sand) 60%,#FBF8F3 100%)}
a.tcard:hover{transform:translateY(-4px)}
/* ============ Mega menü — hizalama ve kaçma düzeltmesi ============ */
header.site .wrap{position:relative}
.has-menu{position:static}
.mega{top:100%;left:auto;right:0;transform:none;width:min(94vw,700px);
margin-top:10px;padding:14px;gap:2px 10px;
transition:opacity .16s ease,visibility .16s ease}
.has-menu:hover .mega,.has-menu:focus-within .mega{transform:none}
/* fare boşlukta kaybolmasın diye görünmez köprü */
.has-menu::after{content:"";position:absolute;top:100%;right:0;width:min(94vw,700px);height:14px}
.has-menu:not(:hover):not(:focus-within)::after{display:none}
.mega a{display:flex;gap:12px;align-items:flex-start;padding:10px 11px}
.mega a i{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--sand);
color:var(--accent);display:grid;place-items:center;transition:.15s}
.mega a i svg{width:21px;height:21px}
.mega a:hover i{background:var(--accent);color:#fff}
.mega a span{display:block;font-weight:500;line-height:1.3}
/* ============ Ön bilgi asistanı ============ */
.chat{position:fixed;right:18px;bottom:82px;z-index:80;display:flex;
flex-direction:column;align-items:flex-end;gap:12px}
.chat-fab{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
background:var(--accent);color:#fff;display:grid;place-items:center;
box-shadow:0 8px 24px -6px rgba(20,22,26,.45);transition:.18s;order:2}
.chat-fab:hover{transform:scale(1.07);background:var(--accent-2)}
.chat-fab .i-close{display:none}
.chat-fab.open .i-open{display:none}
.chat-fab.open .i-close{display:block}
.chat-teaser{order:1;position:relative;background:var(--surface);border:1px solid var(--line);
border-radius:14px 14px 4px 14px;padding:14px 32px 14px 16px;max-width:250px;cursor:pointer;
box-shadow:var(--sh);font-size:.85rem;line-height:1.45;animation:tz .4s ease both}
@keyframes tz{from{opacity:0;transform:translateY(8px)}}
.chat-teaser b{display:block;margin-bottom:2px;font-size:.9rem}
.chat-teaser span{color:var(--muted)}
.chat-teaser .tz{position:absolute;top:5px;right:7px;border:0;background:none;cursor:pointer;
font-size:1.05rem;line-height:1;color:var(--muted);padding:4px}
.chat-panel{order:1;width:min(92vw,372px);height:min(70vh,540px);background:var(--surface);
border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px -24px rgba(20,22,26,.42);
display:flex;flex-direction:column;overflow:hidden;animation:cp .22s ease both}
@keyframes cp{from{opacity:0;transform:translateY(10px) scale(.985)}}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 14px 14px 16px;
background:var(--accent);color:#fff;flex:0 0 auto}
.chat-head .av{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);
display:grid;place-items:center;font-family:var(--serif);font-size:1.02rem;flex:0 0 auto}
.chat-head .who b{display:block;font-family:var(--sans);font-size:.92rem;font-weight:600;line-height:1.2}
.chat-head .who span{font-size:.755rem;opacity:.8;display:flex;align-items:center;gap:5px;margin-top:2px}
.chat-head .who i{width:6px;height:6px;border-radius:50%;background:var(--accent-bright);display:block}
.chat-head .x{margin-left:auto;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;
cursor:pointer;padding:2px 6px;opacity:.75;border-radius:6px}
.chat-head .x:hover{opacity:1;background:rgba(255,255,255,.12)}
.chat-log{flex:1;overflow-y:auto;padding:18px 16px 6px;display:flex;flex-direction:column;gap:9px;
background:var(--bg);scrollbar-width:thin}
.msg{max-width:87%;padding:11px 14px;border-radius:14px;font-size:.875rem;line-height:1.55;
animation:mi .22s ease both}
@keyframes mi{from{opacity:0;transform:translateY(6px)}}
.msg.bot{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;
align-self:flex-start;color:var(--ink-2)}
.msg.bot b{color:var(--ink)}
.msg.bot a{color:var(--accent);font-weight:600}
.msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.typing{display:flex;gap:4px;padding:14px}
.msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);
animation:bl 1.1s infinite ease-in-out}
.msg.typing span:nth-child(2){animation-delay:.16s}
.msg.typing span:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-quick{padding:10px 14px 4px;display:flex;flex-wrap:wrap;gap:7px;background:var(--bg);
flex:0 0 auto;max-height:190px;overflow-y:auto}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
border-radius:100px;padding:8px 14px;font:inherit;font-size:.815rem;cursor:pointer;transition:.14s;
line-height:1.2}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.primary:hover{background:var(--accent-2);color:#fff}
.chat-form{display:grid;gap:8px;width:100%}
.chat-form input[type=text],.chat-form input[name],.chat-form input[type=tel]{
padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.86rem;
background:var(--surface);width:100%}
.chat-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,120,155,.1)}
.chat-form .mini{font-size:.735rem;color:var(--muted);line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.chat-form .mini input{width:15px;height:15px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent)}
.chat-form .mini a{color:var(--accent)}
.chat-form button{background:var(--accent);color:#fff;border:0;border-radius:100px;padding:11px;
font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.chat-form button:hover{background:var(--accent-2)}
.chat-foot{margin:0;padding:9px 16px 12px;font-size:.7rem;color:var(--muted);line-height:1.45;
background:var(--bg);border-top:1px solid var(--line);flex:0 0 auto}
.chat.is-open .chat-teaser{display:none}
@media(max-width:960px){
.mega{width:min(94vw,560px)}
}
@media(max-width:760px){
.tcard .art{height:118px}
.tcard .art svg{width:50px;height:50px}
.mega a i{display:none}
.has-menu::after{display:none}
.chat{right:12px;bottom:70px;left:12px;align-items:flex-end}
.chat-panel{width:100%;height:min(74vh,520px)}
.chat-teaser{max-width:230px}
}
/* hidden özniteliği her zaman kazansın (panel kapalıyken görünmemeli) */
[hidden]{display:none!important}
.tcard .art svg{width:62px;height:62px;stroke-width:1.5}
.mega a i svg{stroke-width:1.6}
/* mega menü: grid hücreleri taşmasın */
.mega>a{min-width:0}
.mega a span{min-width:0;overflow:hidden}
.mega a small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;white-space:normal}
/* ============ Fotoğraflı tedavi kartları ============ */
.tcard .art{height:196px;display:block;position:relative;background:var(--sand);
border-bottom:1px solid var(--line);overflow:hidden}
.tcard .art::before,.tcard .art::after{content:none}
.tcard .art picture{display:block;height:100%}
.tcard .art img{width:100%;height:100%;object-fit:cover;
transition:transform .6s cubic-bezier(.2,.8,.3,1);will-change:transform}
.tcard .art::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;
width:auto;height:52%;border-radius:0;
background:linear-gradient(to top,rgba(20,22,26,.16),transparent);pointer-events:none}
a.tcard:hover .art img{transform:scale(1.05)}
/* hassas kadraj: bu iki görselde üst çerçeve gösterilir */
.tcard .art img[src*="meme-diklestirme"],.tcard .art img[src*="meme-kucultme"]{object-position:50% 20%}
.tcard .tbody{padding:20px 22px 22px}
/* tedavi sayfası kapak görseli */
.t-figure{margin:30px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
background:var(--sand);aspect-ratio:1400/620}
.t-figure img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){
.tcard .art{height:168px}
.t-figure{aspect-ratio:16/10}
}
.tcard .art picture,.tcard .art img{width:100%;display:block}
/* ============ Blog ============ */
.cover{display:block;position:relative;background:var(--sand);overflow:hidden}
.cover picture,.cover img{display:block;width:100%;height:100%}
.cover img{object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
background:linear-gradient(to top,rgba(20,22,26,.14),transparent);pointer-events:none}
.cover-txt{display:grid;place-items:center;align-content:center;
background:linear-gradient(152deg,var(--accent) 0%,#1B87AC 55%,#2FA3C7 100%);color:#fff}
.cover-txt::after{content:none}
.cover-txt b{font-family:var(--serif);font-size:3.6rem;font-weight:500;line-height:1;letter-spacing:-.02em}
.cover-txt i{font-style:normal;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
opacity:.72;margin-top:6px}
/* öne çıkan yazı */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:0;text-decoration:none;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
transition:.18s ease}
.feature:hover{border-color:var(--accent);box-shadow:var(--sh);transform:translateY(-3px)}
.feature:hover .cover img{transform:scale(1.04)}
.feature .cover{height:100%;min-height:320px}
.feature .cover-txt b{font-size:5rem}
.feature .fbody{padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
.feature .tag{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);
font-weight:600;margin-bottom:13px}
.feature h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:13px}
.feature p{color:var(--muted);font-size:1rem;margin-bottom:0}
.feature .go{margin-top:20px;font-size:.9rem;font-weight:600;color:var(--accent)}
.feature .go::after{content:" →"}
/* yazı kartları */
.pcard{padding:0;overflow:hidden}
.pcard .cover{height:186px}
/* ---------- Blog başlığı: dikey yığın yerine iki sütun ---------- */
/* Sayfa başlığı: ortalı, sıkı dikey ritim — bir ekranı yutmasın */
.blog-mast{text-align:center;padding:clamp(14px,2vw,28px) 0 clamp(24px,2.8vw,36px)}
.blog-mast h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin:0 0 12px;letter-spacing:-.022em}
.blog-mast .lead{max-width:60ch;margin:0 auto}
/* ---------- Blog dizini: tek sütun, satır satır ---------- */
.yazi-liste{border-bottom:1px solid var(--line)}
.yazi-satir{display:grid;align-items:center;text-decoration:none;color:inherit;
grid-template-columns:auto minmax(0,1fr) clamp(148px,14vw,192px) auto;
gap:clamp(20px,3vw,44px);
padding:clamp(24px,2.9vw,38px) clamp(10px,1.4vw,20px);
border-top:1px solid var(--line);
transition:background .24s ease,padding-left .24s ease}
.yazi-satir:hover{background:var(--surface);padding-left:clamp(16px,2.1vw,30px)}
/* sıra numarası */
.ys-no{font-family:var(--serif);font-size:clamp(.95rem,1.1vw,1.08rem);color:var(--muted);
opacity:.5;letter-spacing:.02em;align-self:start;padding-top:.35em;transition:color .2s,opacity .2s}
.yazi-satir:hover .ys-no{color:var(--accent);opacity:1}
.ys-ana{display:block;min-width:0}
.yazi-satir .tag{display:block;font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--brass);font-weight:600}
.ys-baslik{display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(1.28rem,2.1vw,1.82rem);line-height:1.24;letter-spacing:-.018em;
color:var(--ink);margin:.42em 0 .38em;transition:color .2s}
.yazi-satir:hover .ys-baslik{color:var(--accent)}
.ys-ozet{display:block;color:var(--muted);font-size:.97rem;line-height:1.58;max-width:64ch}
/* küçük kapak — blok değil, detay */
.ys-kapak{height:clamp(96px,9.2vw,124px);border-radius:10px}
.ys-kapak::after{content:none}
.yazi-satir:hover .ys-kapak img{transform:scale(1.07)}
.ys-kapak.cover-txt b{font-size:1.9rem}
.ys-ok{font-size:1.15rem;color:var(--muted);transition:transform .24s cubic-bezier(.2,.7,.3,1),color .2s}
.yazi-satir:hover .ys-ok{color:var(--accent);transform:translateX(6px)}
.pcard:hover .cover img{transform:scale(1.05)}
.pcard .tbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:1.13rem;margin-bottom:8px}
.pcard p{font-size:.9rem;color:var(--muted);margin:0}
.pcard .meta{margin-top:auto;padding-top:15px;font-size:.775rem;color:var(--muted);
border-top:1px solid var(--line);margin-top:16px}
.pcard .cover-txt b{font-size:2.8rem}
/* Instagram videoları */
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.reel{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column}
.reel-frame{position:relative;width:100%;aspect-ratio:9/14;background:#101114}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel figcaption{padding:18px 20px 20px}
.reel figcaption b{display:block;font-size:1rem;margin-bottom:5px}
.reel figcaption span{display:block;font-size:.87rem;color:var(--muted);line-height:1.5}
.reel figcaption a{display:inline-block;margin-top:11px;font-size:.85rem;font-weight:600;
color:var(--accent);text-decoration:none}
.reel figcaption a:hover{text-decoration:underline}
@media(max-width:860px){
.feature{grid-template-columns:1fr}
.feature .cover{min-height:230px;height:230px}
.feature .cover-txt b{font-size:3.4rem}
}
@media(max-width:760px){
.pcard .cover{height:170px}
.reels{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}
/* Instagram: tıkla-oynat kapağı */
.reel-frame{display:block;position:relative;width:100%;aspect-ratio:9/14;border:0;padding:0;
cursor:pointer;overflow:hidden;background:linear-gradient(158deg,#1F2126 0%,#2C2F36 48%,#3A2F3C 100%)}
.reel-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-frame .ig-glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-118%);
width:44px;height:44px;color:rgba(255,255,255,.42)}
.reel-frame .ig-glyph svg{width:100%;height:100%}
.reel-frame .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--accent);
display:grid;place-items:center;transition:.18s;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.reel-frame .play svg{width:30px;height:30px;margin-left:3px}
.reel-frame:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.reel-frame .rl{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 15px;
font-size:.755rem;color:rgba(255,255,255,.82);text-align:center;line-height:1.4;
background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.reel iframe{width:100%;aspect-ratio:9/14;border:0;display:block;background:#101114}
.reel-frame .ig-glyph{transform:translate(-50%,-190%);width:38px;height:38px}
.reels{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-items:start}
.reel-cta{grid-column:span 2;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:clamp(24px,3vw,34px);align-self:stretch;
display:flex;flex-direction:column;justify-content:center}
.reel-cta h3{margin-bottom:12px}
.reel-cta p{color:var(--muted);font-size:.95rem;max-width:46ch}
.reel-cta .btn{align-self:flex-start;margin-top:8px}
.reel-cta .mini{font-size:.78rem;color:var(--muted);margin:18px 0 0;padding-top:14px;
border-top:1px solid var(--line)}
.reel-cta code{background:var(--sand);padding:2px 6px;border-radius:5px;font-size:.92em}
@media(max-width:860px){.reel-cta{grid-column:span 1}}
/* Blog videosu — yerel oynatıcı */
.reel-frame{background:#101114}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#101114}
.reel-frame .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:68px;height:68px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.95);color:var(--accent);display:grid;place-items:center;
transition:.18s;box-shadow:0 10px 30px -8px rgba(0,0,0,.55);padding:0}
.reel-frame .play svg{width:30px;height:30px;margin-left:3px}
.reel-frame:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.reel-frame .rl{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;
display:flex;align-items:flex-end;gap:10px;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.reel-frame .rl b{flex:1;font-size:.83rem;font-weight:600;color:#fff;line-height:1.35;
text-shadow:0 1px 6px rgba(0,0,0,.4)}
.reel-frame .rl i{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.85);
background:rgba(0,0,0,.42);padding:3px 7px;border-radius:5px;backdrop-filter:blur(4px)}
.reel-frame.playing .play,.reel-frame.playing .rl{opacity:0;visibility:hidden;transition:.2s}
.reel-frame.playing video{object-fit:contain}
/* video süre rozeti — başlık figcaption'da, şeritte sadece süre */
.reel-frame .rl{padding:0;background:none;left:auto;right:10px;bottom:10px;display:block}
.reel-frame .rl i{font-style:normal;font-size:.72rem;color:#fff;font-weight:600;
background:rgba(0,0,0,.55);padding:4px 9px;border-radius:6px;backdrop-filter:blur(6px)}
/* ---- Klinikten video: öne çıkan düzen ---- */
.video-feature{display:grid;grid-template-columns:330px 1fr;gap:clamp(28px,4vw,56px);
align-items:center;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
.video-feature .reel-frame{border-radius:12px;overflow:hidden;aspect-ratio:9/14;position:relative}
.video-feature .vf-body h3{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-bottom:14px;max-width:22ch}
.video-feature .vf-body .lead{max-width:52ch;margin-bottom:14px}
/* oynatma başladıktan sonra rozet ve tuş kaybolsun (kontrollerin üstüne binmesin) */
.reel-frame.started .play,.reel-frame.started .rl{display:none}
@media(max-width:860px){
.video-feature{grid-template-columns:1fr;gap:24px}
.video-feature .reel-frame{max-width:330px;margin-inline:auto;width:100%}
}
/* ---- Sayfa sonu çağrı bandı ---- */
.cta-band{position:relative;overflow:hidden;
background:linear-gradient(168deg,var(--surface) 0%,var(--surface) 42%,var(--accent-soft) 100%);
border:1px solid var(--line);border-radius:20px;
box-shadow:0 32px 64px -44px rgba(20,22,26,.45);
padding:clamp(40px,4.6vw,60px) clamp(24px,4vw,48px) clamp(36px,4.2vw,54px);
max-width:820px;margin-inline:auto;
display:flex;flex-direction:column;align-items:center;text-align:center}
/* sağ alt köşede yumuşak ışık — düz beyaz kutu görünmesin */
.cta-band::after{content:"";position:absolute;right:-100px;bottom:-140px;z-index:0;
width:340px;height:340px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(103,203,227,.20) 0%,rgba(103,203,227,0) 70%)}
.cta-band > *{position:relative;z-index:1}
.cta-band h3{font-size:clamp(1.45rem,2.6vw,2rem);margin-bottom:12px;max-width:24ch;
letter-spacing:-.016em}
.cta-band p{color:var(--muted);font-size:1.02rem;max-width:46ch;margin:0 0 28px;line-height:1.6}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ============ Ana sayfa: işlem alanı sekmeleri ============ */
.tab-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:clamp(26px,3vw,38px)}
.tab{position:relative;display:block;text-align:left;padding:0;cursor:pointer;overflow:hidden;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
transition:.2s cubic-bezier(.2,.8,.3,1);font:inherit;color:inherit}
.tab:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--accent)}
.tab-img{display:block;height:118px;position:relative;overflow:hidden;background:var(--sand)}
.tab-img picture,.tab-img img{display:block;width:100%;height:100%}
.tab-img img{object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1);
filter:grayscale(.32) contrast(.98);opacity:.9}
.tab-img::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(20,22,26,.30),rgba(20,22,26,.02));transition:.25s}
.tab:hover .tab-img img{transform:scale(1.06);filter:none;opacity:1}
.tab-l{display:block;padding:15px 17px 17px}
.tab-l b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:500;
line-height:1.2;letter-spacing:-.01em}
.tab-l span{display:block;font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:4px}
/* seçili sekme */
.tab[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh)}
.tab[aria-expanded="true"] .tab-img img{filter:none;opacity:1}
.tab[aria-expanded="true"] .tab-img::after{
background:linear-gradient(to top,rgba(23,120,155,.42),rgba(23,120,155,.04))}
.tab[aria-expanded="true"] .tab-l b{color:var(--accent)}
.tab[aria-expanded="true"] .tab[aria-expanded="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:var(--accent)}
.tab-panel{animation:tabIn .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}}
.tab-panel .tcard{animation:tabIn .42s cubic-bezier(.2,.8,.3,1) both}
.tab-panel .tcard:nth-child(2){animation-delay:.06s}
.tab-panel .tcard:nth-child(3){animation-delay:.12s}
.tab-panel .tcard:nth-child(4){animation-delay:.18s}
.tab-panel .tcard:nth-child(5){animation-delay:.24s}
/* JS yoksa tüm paneller görünür kalsın */
html:not(.js) .tab-panel[hidden]{display:block}
html:not(.js) .tab-nav{display:none}
@media(max-width:960px){
.tab-nav{grid-template-columns:repeat(2,1fr)}
.tab-img{height:100px}
}
@media(max-width:600px){
.tab-nav{grid-template-columns:1fr 1fr;gap:10px}
.tab-img{height:78px}
.tab-l{padding:11px 12px 13px}
.tab-l b{font-size:1.02rem}
.tab-l span{display:none}
}
/* ================================================================
MOBİL DÜZENLEME — tamamı medya sorgusu içinde.
760px üstü (masaüstü ve tablet) hiçbir kuraldan etkilenmez.
================================================================ */
@media (max-width: 760px) {
/* --- Ölçek: mobilde başlıklar biraz daha sıkı --- */
h1{font-size:clamp(2rem,8.4vw,2.6rem);line-height:1.1}
h2{font-size:clamp(1.6rem,6.6vw,2.1rem)}
.lead{font-size:1.02rem}
section{padding:clamp(46px,10vw,64px) 0}
.sec-head{margin-bottom:26px}
/* --- Hero: fotoğraf ilk ekranı yutmasın --- */
/* Üstteki 16px dolgu, başlık çizgisiyle fotoğraf arasında krem bir
şerit bırakıyordu. Fotoğraf doğrudan başlığın altından başlasın. */
.hero{padding:0 0 clamp(38px,8vw,52px)}
.hero .wrap{gap:22px}
.hero h1{margin-bottom:14px}
.hero .lead{font-size:1rem}
.hero .btn-row{margin-top:22px;gap:9px}
.hero .btn-row .btn{flex:1 1 100%;padding:15px 20px}
/* --- Künye satırı: taşma yok, okunur --- */
.hero-facts{gap:16px 18px;margin-top:26px;padding-top:22px}
.hero-facts div{flex:1 1 calc(50% - 9px);min-width:0}
.hero-facts b{font-size:1.16rem}
.hero-facts span{font-size:.75rem}
/* --- Sekmeler: görsel biraz büyüsün, açıklama geri gelsin --- */
.tab-img{height:96px}
.tab-l{padding:12px 13px 14px}
.tab-l b{font-size:1.06rem}
.tab-l span{display:block;font-size:.735rem;margin-top:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- Özgeçmiş rozetleri: 6 dev kart yerine kompakt 2 sütun --- */
.grid.g2{grid-template-columns:1fr 1fr;gap:10px}
.grid.g2 .card{padding:15px 14px}
.grid.g2 .card h3{font-size:.92rem!important;margin-bottom:5px}
.grid.g2 .card p{font-size:.78rem;line-height:1.4}
.blog-mast{text-align:left;padding:2px 0 18px}
.blog-mast .lead{max-width:none;margin:0}
/* blog dizini: numara ve ok gizlenir, kapak küçülür */
.yazi-satir{grid-template-columns:minmax(0,1fr) 104px;gap:16px;
padding:20px 0;align-items:start}
.yazi-satir:hover{padding-left:0}
.ys-no,.ys-ok{display:none}
.ys-baslik{font-size:1.12rem;margin:.4em 0 .34em}
.ys-ozet{font-size:.89rem;line-height:1.52}
.ys-kapak{height:82px;border-radius:8px}
/* --- Süreç bandı: numaralı adımlar daha okunur --- */
.band-accent .ticks{gap:16px}
.band-accent .ticks li{font-size:.94rem}
/* --- Tedavi künyesi: 2x2 yerine daha net --- */
.spec{grid-template-columns:1fr 1fr}
.spec div{padding:15px 14px}
.spec dd{font-size:.98rem}
/* --- İyileşme takvimi: etiket ve metin ayrışsın --- */
.stage{padding:18px 0;gap:8px}
.stage b{font-size:1.02rem}
.stage p{font-size:.94rem}
/* --- Form ve kartlar --- */
.form-card{padding:20px 17px}
.cta-band{padding:30px 20px}
.note{padding:16px 18px}
/* --- Alt bar ile çakışmayı önle --- */
body{padding-bottom:82px}
.chat{bottom:94px;right:12px}
.chat-fab{width:48px;height:48px}
.chat-panel{height:min(72vh,500px)}
/* teaser balonu içeriğin üstünü kapatıyordu — mobilde çıkmasın */
.chat-teaser{display:none!important}
/* --- Footer: daha derli toplu --- */
footer.site{padding:44px 0 24px}
footer.site .cols{gap:26px}
footer.site a{padding:6px 0}
.disclaimer{margin-top:28px;padding:14px 16px;font-size:.755rem}
.legal{margin-top:28px;flex-direction:column;gap:8px}
}
/* Çok dar telefonlar */
@media (max-width: 380px) {
.tab-nav{gap:8px}
.tab-img{height:80px}
.tab-l b{font-size:.98rem}
.hero-facts div{flex:1 1 100%}
.mobile-bar a{font-size:.72rem}
}
/* Mobil menü düzeltmeleri — çekmece içi alt menü */
@media (max-width: 760px) {
/* Satır ikiye ayrıldı: yazıya basınca tedaviler sayfası açılır,
sağdaki oka basınca işlem listesi. Alt çizgi artık satırın tamamında. */
.has-menu{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:stretch;border-bottom:1px solid var(--line)}
.has-menu > a{border-bottom:0}
.alt-ac{display:flex;align-items:center;justify-content:center;width:48px;
background:none;border:0;border-left:1px solid var(--line);cursor:pointer;
padding:0;-webkit-tap-highlight-color:transparent}
.alt-ac::before{content:"";width:8px;height:8px;margin-top:-4px;
border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease}
.has-menu.open .alt-ac::before{transform:rotate(-135deg);margin-top:2px;
border-color:var(--accent)}
.has-menu.open > a{color:var(--accent);font-weight:600}
.has-menu .mega{grid-column:1/-1}
/* alt menü çekmecenin içine sığsın */
.has-menu .mega{position:static;inset:auto;width:auto;max-width:100%;
margin:0;padding:2px 0 10px;border:0;box-shadow:none;background:transparent;
transform:none;opacity:1;visibility:visible;gap:0;grid-template-columns:1fr}
.has-menu:not(.open) .mega{display:none}
.has-menu.open .mega{display:grid}
.has-menu .mega a{padding:11px 12px 11px 16px;border-bottom:1px solid var(--line);
border-radius:0;font-size:.93rem;color:var(--ink-2);position:relative}
/* tire yerine girinti — hiyerarşi zaten girintiyle belli */
.has-menu .mega a{padding-left:22px}
.has-menu .mega a:last-child{border-bottom:0}
.has-menu .mega a:hover,.has-menu .mega a:active{background:var(--accent-soft);color:var(--accent)}
}
/* Mobil menü paneli — tam ekran açılması için
Not: header'daki backdrop-filter, içindeki position:fixed panelin
kapsayıcısını header yapıyor ve paneli header yüksekliğinde kesiyordu.
Mobilde blur'u kaldırınca panel viewport'a göre konumlanıyor. */
@media (max-width: 760px) {
header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
nav.main{z-index:70;padding-top:76px}
.burger{position:relative;z-index:72}
.menu-perde{position:fixed;inset:0;z-index:69;background:rgba(20,22,26,.45);
border:0;padding:0;cursor:pointer;animation:perdeIn .2s ease both}
@keyframes perdeIn{from{opacity:0}}
body.menu-acik{overflow:hidden}
}
@media (max-width: 760px) {
/* çekmecede sadece işlem adları — açıklamalar listeyi gereksiz uzatıyor */
.has-menu .mega a small{display:none}
.has-menu .mega a{padding:13px 12px 13px 16px}
/* menü açıkken alt bar ve sohbet tuşu görünmesin */
body.menu-acik .mobile-bar,
body.menu-acik .chat{display:none}
}
@media (max-width: 760px) {
.has-menu .mega a{white-space:normal;line-height:1.35}
.has-menu .mega a span{overflow:visible;white-space:normal}
}
@media (max-width: 760px) {
/* Perde, header'ın katmanının (z-index:60) üstünde kalıyordu ve menüyü de
karartıp tıklanamaz yapıyordu. Menü açıkken header'ı perdenin üstüne al. */
body.menu-acik header.site{z-index:80}
}
/* Klavyeyle gezenler için: sekmeye basınca ilk çıkan bağlantı,
menüyü atlayıp doğrudan içeriğe götürür. */
.atla{position:absolute;left:12px;top:-60px;z-index:200;
background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
font-size:.9rem;font-weight:600;text-decoration:none;transition:top .18s ease}
.atla:focus{top:0;outline:2px solid #fff;outline-offset:-4px}
main:focus{outline:none}
/* Kurum logoları — yalnızca data.py'de tanımlıysa basılır */
/* Her logo aynı ölçüdeki bir kutuya oturur: kutunun yüksekliği sabit,
logo içine sığar ve ortalanır. Böylece dört logonun da üstü, altı ve
merkezi aynı hizada olur — şekilleri farklı olsa bile. */
.kurum-logo{display:block;width:100%;max-width:132px;height:70px;
object-fit:contain;object-position:center;margin:auto auto 0;padding-top:14px;
box-sizing:content-box}
/* UCI çok kalın bir yazı logosu; aynı kutuda diğerlerini eziyordu */
.kurum-logo[src*="irvine"]{max-width:104px}
/* ilk hücrenin sol dolgusu sıfır (yazı sayfa kenarından başlasın diye);
logoyu o kadar geri veriyoruz ki hücrenin tam ortasında dursun */
.hero-serit .wrap > div:first-child .kurum-logo{transform:translateX(11px)}
.hero-serit .wrap > div:last-child .kurum-logo{transform:translateX(-11px)}
@media(max-width:760px){
.kurum-logo{height:56px;max-width:130px;padding-top:10px}
}
/* Süreç bölümü: üstte iki sütun, altta tam genişlik hizmet listesi */
.surec-ic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
/* hasta hizmetleri (transfer, otel, hemşire…) — iki sütunun da altında */
.hizmetler{margin-top:clamp(34px,4vw,52px);padding-top:clamp(26px,2.8vw,34px);
border-top:1px solid rgba(255,255,255,.22)}
.hizmet-ust{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;
letter-spacing:-.015em;text-transform:none;color:#fff;margin:0 0 12px}
.hizmet-giris{max-width:72ch;font-size:1rem;line-height:1.6;opacity:.82;margin:0 0 clamp(24px,2.8vw,34px)}
.hizmetler ul{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
/* Mavi zeminde duz metin yerine hafif kart: cam gibi, cercevesi ince.
Zemini bogmasin diye opaklik dusuk tutuldu. */
.hizmetler li{min-width:0;display:flex;flex-direction:column;
background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.14);
border-radius:14px;padding:clamp(18px,2vw,24px);
transition:background .3s ease,border-color .3s ease,transform .3s ease}
/* Her maddenin kendi simgesi. Sitenin cizgi stiliyle ayni. */
.hizmet-simge{width:26px;height:26px;display:block;margin-bottom:13px;
color:rgba(255,255,255,.62);transition:color .3s ease,transform .3s ease}
.hizmetler b{display:block;font-size:.94rem;font-weight:600;margin-bottom:5px}
.hizmetler span{display:block;font-size:.88rem;line-height:1.58;opacity:.8}
/* Ogeler sirayla asagidan yukari belirir; zaman cizelgesiyle ayni ritim. */
html.js .hizmetler li{opacity:0;transform:translateY(22px)}
html.js .hizmetler.in li{opacity:1;transform:none;
transition:opacity .7s ease calc(.12s + var(--g) * .085s),
transform .75s cubic-bezier(.16,.72,.24,1) calc(.12s + var(--g) * .085s),
background .3s ease,border-color .3s ease}
html:not(.js) .hizmetler li{opacity:1;transform:none}
html.js .hizmetler.in li:hover,.hizmetler li:hover{
background:rgba(255,255,255,.115);border-color:rgba(255,255,255,.3);
transform:translateY(-3px)}
.hizmetler li:hover .hizmet-simge{color:#fff;transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
html.js .hizmetler li{opacity:1;transform:none}
.hizmetler li,.hizmet-simge{transition:none}
}
@media(max-width:960px){
.surec-ic{grid-template-columns:1fr}
.hizmetler ul{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.hizmetler ul{grid-template-columns:1fr;gap:14px}
}
/* İşlemler bölümünün altı: tüm işlemler düğmesi + Telegram bağlantısı */
.islem-alt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:28px 0 0}
.tg-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
font-size:.92rem;font-weight:600;color:var(--accent);transition:.18s}
.tg-link svg{flex:0 0 auto;opacity:.9}
.tg-link:hover{color:var(--accent-2)}
.tg-link:hover svg{transform:translateX(2px)}
.tg-link svg{transition:transform .2s ease}
/* Hero altında öne çıkan alanlar — hem yönlendirme hem arama için */
/* Akışkan dizilimde satır sonları dile göre değişiyordu (TR 4+2, EN 5+1).
Sabit üç sütunlu ızgara: hangi dilde olursa olsun 3+3 duruyor. */
.hero-odak{display:grid;grid-template-columns:repeat(3,max-content);
gap:10px clamp(18px,2.4vw,34px);align-items:baseline;
margin:26px 0 0;font-size:.85rem}
.hero-odak span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);font-weight:600;grid-column:1/-1;margin-bottom:2px}
/* çizgisiz; bağlantı olduğu üstüne gelince renkle belli oluyor */
.hero-odak a{color:var(--ink-2);text-decoration:none;position:relative;
padding-bottom:2px;border-bottom:1px solid transparent;transition:.18s}
.hero-odak a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:1100px){
/* hero metin sütunu daralıyor; üç sütun sığmıyor */
.hero-odak{grid-template-columns:repeat(2,max-content)}
}
@media(max-width:760px){
/* telefonda iki eşit sütun — hizalama daha düzgün duruyor */
.hero-odak{grid-template-columns:1fr 1fr;gap:9px 14px;
margin-top:18px;font-size:.78rem}
.hero-odak a{justify-self:start}
}
/* ============ Marka / logo ============ */
.brand{gap:0;align-items:center}
.brand .brand-logo{display:block}
.brand .brand-logo img{display:block;height:60px;width:auto}
footer.site .fbrand .brand-logo img{height:66px;width:auto;margin-bottom:16px;opacity:.95}
footer.site .fbrand b{font-size:1.02rem}
@media(max-width:900px){ .brand .brand-logo img{height:48px} }
@media(max-width:480px){ .brand .brand-logo img{height:42px} }
/* ================= HAKKIMDA — hikâye sayfası ================= */
/* Giriş: portre solda tam kanama (ekran kenarına kadar), metin sağda.
Ana sayfanın aynası; ayrıca fotoğrafın iç kenarında dikey rota şeridi. */
.hk-giris{position:relative;overflow:hidden;padding:0;
min-height:clamp(500px,calc(84svh - 124px),760px);
display:flex;flex-direction:column;justify-content:stretch}
.hk-giris-gorsel{position:absolute;right:0;top:0;bottom:0;width:43%;z-index:0;overflow:hidden}
.hk-giris-gorsel picture{display:block;height:100%}
.hk-giris-gorsel img{width:100%;height:100%;object-fit:cover;object-position:54% 16%;display:block;
transition:transform 1.25s cubic-bezier(.2,.78,.24,1), filter 1.25s ease}
.hk-giris-gorsel:hover img{transform:scale(1.11);filter:brightness(1.04) saturate(1.05)}
/* sağ kenar krem zemine eriyor — kesik bir kutu görünmesin */
.hk-giris-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to right,var(--bg) 0%,rgba(251,250,247,.7) 11%,rgba(251,250,247,0) 30%)}
/* dikey rota şeridi: dört durak, fotoğrafın koyu tarafında */
.hk-rota{position:absolute;right:26px;top:50%;z-index:2;
writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
font-size:.63rem;letter-spacing:.36em;text-transform:uppercase;white-space:nowrap;
color:rgba(228,196,157,.92);font-weight:500}
.hk-giris > .wrap{position:relative;z-index:1;flex:1 1 auto;display:flex;align-items:center;
padding-block:clamp(30px,5vh,62px);pointer-events:none}
/* yıl şeridi: bölümün en altında, ekran kenarından kenarına */
.hk-serit{position:relative;z-index:1;flex:0 0 auto;background:var(--bg);
border-top:1px solid var(--line)}
.hk-giris-metin{margin-right:auto;width:min(57%,660px);pointer-events:auto}
.hk-giris .crumb{margin-bottom:14px}
.hk-giris h1{font-size:clamp(2.4rem,5vw,4.05rem);margin:10px 0 24px;letter-spacing:-.024em}
.hk-giris .lead{max-width:46ch}
.hk-giris .btn-row{margin-top:30px}
/* bölüm gezinme rayı — girişin alt kenarında, fotoğrafın üstünde */
.hk-nav{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.hk-nav::-webkit-scrollbar{display:none}
.hk-nav a{flex:1 1 0;min-width:132px;padding:16px 18px 15px;text-decoration:none;
border-right:1px solid var(--line);font-size:.84rem;color:var(--muted);
transition:transform .2s cubic-bezier(.2,.7,.3,1),color .2s,box-shadow .2s}
.hk-nav a:last-child{border-right:0}
.hk-nav a span{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);
margin-bottom:3px;letter-spacing:-.01em}
/* vurgu: hücre şeritten hafifçe yukarı kalkar */
.hk-nav a:hover,.hk-nav a:focus-visible{color:var(--accent);transform:translateY(-4px);
background:var(--surface);box-shadow:0 10px 22px -14px rgba(20,22,26,.5)}
.hk-nav a:hover span,.hk-nav a:focus-visible span{color:var(--accent)}
/* bölümler */
.hk-bolum{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
/* görseli olmayan bölümler: daha dar nefes payı */
.hk-bolum.dar{padding:clamp(44px,5vw,68px) 0}
.hk-bolum:nth-child(even){background:var(--sand)}
.hk-ic{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(28px,5vw,72px);align-items:start}
.hk-sol{position:sticky;top:100px}
/* serif rakam/harflerin yan boşluğu 3px sağa kaydırıyordu — optik hizalama */
.hk-yil{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5.6vw,4.4rem);
font-weight:400;line-height:1;letter-spacing:-.03em;color:var(--accent);opacity:.24;
margin:0 0 10px -.043em}
.hk-yer{font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);
font-weight:600;margin:0 0 12px}
/* 14ch başlıkları üç satıra bölüyordu; iki satırda kalsınlar */
.hk-sol h2{font-size:clamp(1.5rem,2.8vw,2.15rem);max-width:22ch}
.hk-sag{font-size:1.04rem;color:var(--ink-2);max-width:62ch}
.hk-sag p{margin-bottom:1.1em}
.hk-alinti{margin:28px 0 0;padding:24px 26px;background:var(--surface);
border-left:3px solid var(--accent);border-radius:0 12px 12px 0;box-shadow:var(--sh)}
.hk-bolum:nth-child(even) .hk-alinti{background:var(--bg)}
.hk-alinti p{font-family:var(--serif);font-size:1.16rem;line-height:1.45;color:var(--ink);
margin:0 0 10px;font-style:italic}
.hk-alinti cite{font-style:normal;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
/* görsel galerisi */
/* Galeri: tek satır, bütün fotoğraflar aynı yükseklikte. Genişlikler her
fotoğrafın kendi en/boy oranına göre paylaşılıyor — kenarlar hizalı kalır. */
/* Her satır metin sütunuyla aynı yerde başlar ve biter; hücreler eşit
bölünür, yükseklik bütün bölümlerde aynıdır. */
.hk-galeri{--h:clamp(230px,25vw,362px);}
.hk-galeri.g5{--h:clamp(210px,22vw,312px)}
.hk-galeri{
display:flex;gap:18px;margin-top:clamp(34px,4vw,52px);height:var(--h)}
.hk-g{flex:1 1 0;min-width:0;height:100%;margin:0;
border-radius:var(--r);overflow:hidden;background:var(--sand)}
/* iki dikey kare: satır daralır, yükselir — portre oranı korunur */
.hk-galeri.portre{--h:clamp(320px,34vw,460px);max-width:760px;margin-inline:auto}
/* tek kare: satırın yarısı kadar, aynı sol hizada */
.hk-galeri.tek{justify-content:center}
.hk-galeri.tek .hk-g{flex:0 0 calc(50% - 9px)}
.hk-g img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block;
transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.hk-g:hover img{transform:scale(1.035)}
/* fotoğrafın köşesinde yıl */
.hk-g{position:relative}
.hk-g figcaption{position:absolute;left:10px;bottom:10px;z-index:1;
font-size:.7rem;letter-spacing:.1em;font-weight:600;color:#fff;
background:rgba(20,22,26,.6);backdrop-filter:blur(6px);
padding:4px 9px;border-radius:5px}
/* belgeler */
.belgeler{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.belge{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.belge .by{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--brass);font-weight:600;
margin-bottom:12px}
.belge b{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;margin-bottom:8px}
.belge .ba{display:block;font-size:.86rem;color:var(--muted);line-height:1.5}
/* diller + uğraşlar */
.hk-ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px)}
.diller,.ugraslar{display:grid;grid-template-columns:1fr;gap:0;margin-top:26px;
border-top:1px solid var(--line)}
.dil,.ug{display:flex;align-items:baseline;gap:14px;padding:15px 4px;
border-bottom:1px solid var(--line);position:relative;transition:.16s}
.dil::before,.ug::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;
background:var(--accent);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.dil:hover::before,.ug:hover::before{width:14px}
.dil:hover,.ug:hover{padding-left:24px}
.dil b,.ug b{font-family:var(--serif);font-size:1.14rem;font-weight:500;letter-spacing:-.01em;
min-width:8.5ch;flex:0 0 auto}
.dil span,.ug span{font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.dil span::before,.ug span::before{content:"";display:inline-block;width:5px;height:5px;
border-radius:50%;background:var(--accent-soft);border:1px solid rgba(23,120,155,.35);
margin-right:9px;vertical-align:middle;transform:translateY(-1px)}
@media(max-width:960px){
.hk-giris{min-height:0;display:block}
.hk-giris-gorsel{position:relative;width:100%;height:clamp(300px,52vw,440px)}
.hk-giris-gorsel img{object-position:54% 14%}
/* Telefonda alttaki beyaz geçiş fotoğrafın üçte birini soluklaştırıyordu;
görsel burada zaten tam genişlikte ve altında krem zemin başlıyor,
geçişe gerek yok. Masaüstündeki yumuşak geçiş olduğu gibi duruyor. */
.hk-giris-gorsel::after{background:none}
.hk-rota{left:18px;right:auto;font-size:.58rem;letter-spacing:.28em}
.hk-giris > .wrap{display:block;padding-block:4px clamp(24px,5vw,40px)}
.hk-giris-metin{width:auto;margin-left:0}
.hk-ic{grid-template-columns:1fr;gap:20px}
.hk-sol{position:static}
.hk-sol h2{max-width:none}
.belgeler{grid-template-columns:repeat(2,1fr)}
.hk-ikili{grid-template-columns:1fr}
}
@media(max-width:760px){
.hk-galeri{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto}
.hk-g{aspect-ratio:4/5}
.hk-g.genis{grid-column:1/-1;aspect-ratio:3/2}
/* tek başına kalan son kare satırı doldursun, sağ boş kalmasın.
Dikey kareler kare orana gelsin — 3/2'ye zorlanınca yüz kesiliyor. */
.hk-g:nth-child(odd):last-child:not(.genis){grid-column:1/-1;aspect-ratio:1/1}
.hk-yil{font-size:2.4rem}
.hk-nav a{min-width:118px;padding:13px 14px}
.belgeler{grid-template-columns:1fr}
}
/* ---------- Ana sayfa: belge vitrini ---------- */
/* Arkadaki "Uygulanan işlemler" bölümü de kum rengi; ikisi yan yana gelince
sınır kayboluyordu. Bu bölüm krem zeminde, dikey payı da dar. */
.belge-bolum{background:var(--surface);border-top:1px solid var(--line);
padding:clamp(48px,5.4vw,72px) 0 clamp(44px,4.8vw,64px)}
/* başlık ve ızgara sayfada ortalı */
.belge-ust{text-align:center;margin-bottom:clamp(22px,2.4vw,32px)}
.belge-ust h2{margin:6px 0 12px}
.belge-ust .lead{max-width:58ch;margin:0 auto}
/* 2x2, kareler eşit ölçüde */
/* tek sıra, küçük kareler */
/* dört kare içerik genişliğini baştan sona doldurur */
/* Belge sayısı değişse de tek sıra kalsın (şu an 5) */
.belge-vitrin{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
gap:clamp(14px,1.6vw,22px)}
.bv{display:block;text-decoration:none;color:inherit}
/* Başlıklar bir ya da iki satır olabiliyor; kurum adları aynı hizada
başlasın diye başlığa iki satırlık yer ayırıyoruz. */
.bv-ad{min-height:2.7em}
/* Belgelerin en-boy oranları farklı (GMC dikey, diğerleri yatay).
Çerçeveyi sabit orana alıp içine sığdırıyoruz; böylece dördü de
aynı yükseklikte durur ve altlarındaki isimler hizalanır. */
.bv-kare{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
transition:border-color .2s ease,box-shadow .2s ease,transform .25s cubic-bezier(.2,.8,.3,1)}
.bv-kare picture{position:absolute;inset:clamp(9px,1vw,13px);display:block}
.bv-kare img{width:100%;height:100%;object-fit:contain;border-radius:3px;
filter:drop-shadow(0 8px 18px rgba(20,22,26,.16))}
.bv:hover .bv-kare{border-color:var(--accent);box-shadow:var(--sh);transform:translateY(-4px)}
/* büyüteç: kareye basılabileceği belli olsun */
.bv-kare::after{content:"";position:absolute;right:9px;bottom:9px;width:28px;height:28px;
border-radius:50%;background:rgba(23,120,155,.92) no-repeat center/14px 14px;
background-image:url("data:image/svg+xml;utf8,");
opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.bv:hover .bv-kare::after,.bv:focus-visible .bv-kare::after{opacity:1;transform:scale(1)}
.bv-ad{display:block;font-family:var(--serif);font-size:.87rem;font-weight:500;
letter-spacing:-.01em;line-height:1.3;margin:11px 0 2px;transition:color .2s}
.bv:hover .bv-ad{color:var(--accent)}
.bv-kurum{display:block;font-size:.72rem;color:var(--muted);line-height:1.35;
max-width:22ch}
.belge-vitrin-alt{margin:clamp(22px,2.4vw,30px) 0 0;text-align:center}
@media(max-width:860px){
.belge-ust{text-align:left}
.belge-ust .lead{max-width:none;margin:0}
.belge-vitrin-alt{text-align:left}
.belge-vitrin{grid-auto-flow:row;grid-template-columns:1fr 1fr;
grid-auto-columns:auto;gap:16px}
}
/* tıklanınca açılan büyütme penceresi — görsel ekranın ~%60'ı kadar */
.belge-pencere{border:0;padding:0;background:transparent;max-width:none;max-height:none;
width:100%;height:100%;overflow:hidden;color:#F2EFE9}
.belge-pencere::backdrop{background:rgba(16,18,21,.86);backdrop-filter:blur(3px)}
.belge-pencere{display:none}
.belge-pencere[open]{display:grid;place-content:center;justify-items:center;gap:16px}
.belge-pencere img{max-width:60vw;max-height:60vh;width:auto;height:auto;display:block;
background:#fff;border-radius:6px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.bp-alt{margin:0;text-align:center;font-size:.9rem}
.bp-alt b{display:block;font-family:var(--serif);font-weight:500;font-size:1.05rem;margin-bottom:3px}
.bp-alt span{color:rgba(242,239,233,.68);font-size:.82rem}
.bp-kapat{position:fixed;top:18px;right:20px;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(242,239,233,.3);background:rgba(16,18,21,.5);color:#F2EFE9;
font-size:1.6rem;line-height:1;cursor:pointer;transition:.18s}
.bp-kapat:hover{background:rgba(242,239,233,.16)}
@media(max-width:760px){
.belge-pencere img{max-width:88vw;max-height:62vh}
}
/* Belge ülke bayrakları */
.bayrak{display:inline-block;width:21px;height:auto;vertical-align:-2px;
margin-right:8px;border-radius:2px;box-shadow:0 0 0 1px rgba(20,22,26,.14)}
.bv-ad .bayrak{width:19px;vertical-align:-1px;margin-right:7px}
/* ---------- Belgeler sayfası ---------- */
.belgeler-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(26px,3.4vw,46px);margin-top:clamp(28px,3.4vw,44px)}
.belge{margin:0;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
transition:box-shadow .22s ease,border-color .22s ease}
.belge:hover{border-color:var(--accent);box-shadow:var(--sh)}
.belge-gorsel{display:block;background:var(--sand);border-bottom:1px solid var(--line);
padding:clamp(16px,2vw,26px);position:relative;cursor:zoom-in}
/* büyüteç işareti — ana sayfadaki vitrinle aynı */
.belge-gorsel::after{content:"";position:absolute;right:14px;bottom:14px;width:34px;height:34px;
border-radius:50%;background:rgba(23,120,155,.92) no-repeat center/16px 16px;
background-image:url("data:image/svg+xml;utf8,");
opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.belge:hover .belge-gorsel::after,.belge-gorsel:focus-visible::after{opacity:1;transform:scale(1)}
.belge-gorsel img{display:block;width:100%;height:auto;border-radius:4px;
box-shadow:0 10px 26px -18px rgba(20,22,26,.5);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.belge:hover .belge-gorsel img{transform:scale(1.02)}
.belge figcaption{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.belge-yil{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass);font-weight:600}
.belge figcaption b{display:block;font-family:var(--serif);font-size:1.18rem;font-weight:500;
letter-spacing:-.01em;margin:8px 0 4px}
.belge-kurum{display:block;font-size:.85rem;color:var(--accent);margin-bottom:12px}
.belge figcaption p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.belge-not{margin-top:clamp(28px,3vw,42px);font-size:.85rem;color:var(--muted);
max-width:70ch;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:760px){
.belgeler-liste{grid-template-columns:1fr;gap:20px}
.belge figcaption{padding:18px 20px 22px}
}
/* ---------- Künye paneli (ana sayfa "Hakkımda") ---------- */
.kunye-panel{display:grid;grid-template-columns:1fr 1fr;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.kunye{display:flex;gap:16px;padding:24px 24px 26px;position:relative;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.2s ease}
.kunye:nth-child(2n){border-right:0}
.kunye:nth-last-child(-n+2){border-bottom:0}
.kunye::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--accent);transform:scaleY(0);transform-origin:top;
transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.kunye:hover{background:var(--accent-soft)}
.kunye:hover::before{transform:scaleY(1)}
.kunye-no{flex:0 0 auto;font-size:.68rem;letter-spacing:.1em;font-weight:600;
color:var(--brass);padding-top:5px;font-variant-numeric:tabular-nums;transition:.2s}
.kunye:hover .kunye-no{color:var(--accent)}
.kunye b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;
letter-spacing:-.01em;line-height:1.25;margin-bottom:6px}
.kunye span{display:block;font-size:.87rem;color:var(--muted);line-height:1.5}
@media(max-width:960px){
.kunye-panel{grid-template-columns:1fr}
.kunye{border-right:0}
.kunye:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.kunye:last-child{border-bottom:0}
}
/* ---------- Belgeler: kronolojik zaman çizelgesi ---------- */
.zaman{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
gap:0 clamp(16px,2.4vw,34px);padding-top:34px}
/* çizgi: görünüme girince soldan sağa çizilir */
.zaman-ray{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line);
transform:scaleX(0);transform-origin:left center}
html.js .zaman.in .zaman-ray{transform:scaleX(1);
transition:transform 1.5s cubic-bezier(.16,.72,.24,1) .1s}
html:not(.js) .zaman-ray{transform:scaleX(1)}
.zaman-oge{position:relative;padding-right:clamp(10px,1.6vw,22px)}
html.js .zaman.in .zaman-oge{opacity:1;transform:none;
transition:opacity .85s ease calc(.34s + var(--g) * .26s),
transform .85s cubic-bezier(.16,.72,.24,1) calc(.34s + var(--g) * .26s)}
html.js .zaman .zaman-oge{opacity:0;transform:translateY(26px)}
/* nokta */
.zaman-nokta{position:absolute;left:0;top:-34px;width:11px;height:11px;border-radius:50%;
background:var(--bg);border:1.5px solid var(--accent);
transform:scale(0)}
html.js .zaman.in .zaman-nokta{transform:scale(1);
transition:transform .55s cubic-bezier(.34,1.6,.5,1) calc(.26s + var(--g) * .26s)}
html:not(.js) .zaman-nokta{transform:scale(1)}
.zaman-oge:hover .zaman-nokta{background:var(--accent)}
.zaman-yil{display:block;font-size:.74rem;letter-spacing:.14em;font-weight:600;
color:var(--brass);margin-bottom:10px;font-variant-numeric:tabular-nums}
.zaman-oge b{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.62rem);
font-weight:500;letter-spacing:-.015em;line-height:1.15;margin-bottom:9px}
.zaman-a{display:block;font-size:.87rem;color:var(--muted);line-height:1.55;max-width:26ch}
@media(max-width:860px){
.zaman{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:26px}
.zaman-ray{left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto;
transform:scaleY(0);transform-origin:top center}
html.js .zaman.in .zaman-ray{transform:scaleY(1)}
html:not(.js) .zaman-ray{transform:scaleY(1)}
.zaman-oge{padding:0 0 30px}
.zaman-oge:last-child{padding-bottom:0}
.zaman-nokta{left:-26px;top:8px}
.zaman-a{max-width:none}
}
@media(prefers-reduced-motion:reduce){
html.js .zaman .zaman-oge{opacity:1;transform:none}
html.js .zaman .zaman-ray{transform:scaleX(1)}
html.js .zaman .zaman-nokta{transform:scale(1)}
}
/* ---------- Süreç adımları: numaralı, sırayla açılan ---------- */
.adimlar{list-style:none;margin:0;padding:0;position:relative}
/* numaraları birleştiren dikey çizgi */
.adimlar::before{content:"";position:absolute;left:19px;top:20px;bottom:24px;width:1px;
background:rgba(255,255,255,.28);transform:scaleY(0);transform-origin:top}
html.js .adimlar.in::before{transform:scaleY(1);
transition:transform 1.8s cubic-bezier(.16,.72,.24,1) .2s}
html:not(.js) .adimlar::before{transform:scaleY(1)}
.adimlar li{position:relative;display:flex;gap:20px;padding:0 0 26px}
.adimlar li:last-child{padding-bottom:0}
html.js .adimlar li{opacity:0;transform:translateY(18px)}
html.js .adimlar.in li{opacity:1;transform:none;
transition:opacity .9s ease calc(.3s + var(--g) * .28s),
transform .9s cubic-bezier(.16,.72,.24,1) calc(.3s + var(--g) * .28s)}
.adim-no{flex:0 0 auto;width:39px;height:39px;border-radius:50%;
display:grid;place-items:center;font-size:.92rem;font-weight:600;letter-spacing:0;
color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.32);
font-variant-numeric:tabular-nums;position:relative;z-index:1;
backdrop-filter:blur(3px);transform:scale(.5)}
html.js .adimlar.in .adim-no{transform:scale(1);
transition:transform .6s cubic-bezier(.34,1.55,.5,1) calc(.26s + var(--g) * .28s)}
html:not(.js) .adim-no{transform:scale(1)}
.adimlar li:hover .adim-no{background:#fff;color:var(--accent);border-color:#fff}
.adimlar b{display:block;color:#fff;font-size:1.06rem;font-weight:600;
margin-bottom:6px;padding-top:9px}
.adimlar p{margin:0;color:rgba(228,245,250,.86);font-size:.95rem;line-height:1.6}
@media(max-width:760px){
.adimlar li{gap:15px;padding-bottom:22px}
.adim-no{width:34px;height:34px;font-size:.85rem}
.adimlar::before{left:17px}
.adimlar b{padding-top:6px;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
html.js .adimlar li{opacity:1;transform:none}
html.js .adimlar::before{transform:scaleY(1)}
html.js .adimlar .adim-no{transform:scale(1)}
}
/* ---------- Süreç bölümü görseli ---------- */
.surec-gorsel{margin:clamp(30px,4vw,46px) 0 0;border-radius:var(--r);overflow:hidden;
max-width:520px;aspect-ratio:1100/760;position:relative;
box-shadow:0 26px 50px -26px rgba(0,0,0,.5)}
.surec-gorsel img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.2s cubic-bezier(.2,.78,.24,1)}
.surec-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(150deg,rgba(23,120,155,.16),rgba(20,22,26,.12));
mix-blend-mode:multiply}
.surec-gorsel:hover img{transform:scale(1.05)}
@media(max-width:960px){.surec-gorsel{max-width:none}}
@media(max-width:760px){.surec-gorsel{margin-top:26px}}
/* ============ Hasta değerlendirmeleri ============ */
/* Sayfanın kapanışı. Yorum METİNLERİ sitede yok — gerekçesi data.py'de.
Kutu yerine kum zeminli bir şerit: iletişim bölümünden sonra geldiği için
sayfayı kapatıyor, ayrı bir kart gibi havada durmuyor. */
/* Sayfa ritmi: her bölüm komşusundan ayrılsın.
bej (işlemler) -> turkuaz (süreç) -> beyaz (belgeler) -> bej (iletişim)
-> serin mavi (yorumlar) -> koyu (alt bilgi) */
.iletisim-bolum{background:var(--sand);border-top:1px solid var(--line);
padding:clamp(54px,6.4vw,88px) 0}
.yorum-bolum{position:relative;isolation:isolate;
padding:clamp(60px,7.2vw,100px) 0;
border-top:1px solid #DDE7EA;border-bottom:1px solid #DDE7EA;
background:linear-gradient(180deg,#F2F7F8 0%,#E6EFF2 100%)}
.yorum-bolum::before{content:"";position:absolute;inset:0;z-index:-1;
background:
radial-gradient(880px 400px at 50% 14%,rgba(255,255,255,.85),transparent 66%),
radial-gradient(540px 320px at 86% 96%,rgba(23,120,155,.08),transparent 70%),
radial-gradient(480px 300px at 12% 92%,rgba(103,203,227,.10),transparent 72%)}
.yorum-bolum .sec-head{margin-bottom:clamp(30px,3.4vw,42px)}
.yorum-bolum .sec-head h2{max-width:24ch;margin-inline:auto}
.yorum-bolum .sec-head .lead{max-width:58ch;font-size:1rem;margin-top:14px}
.yorum-kartlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(18px,2.4vw,30px);max-width:980px;margin-inline:auto}
.yorum-kart{position:relative;overflow:hidden;
display:flex;flex-direction:column;gap:13px;
padding:clamp(26px,3vw,36px) clamp(24px,3vw,36px);
background:#fff;border:1px solid #E4EBEE;border-radius:18px;
text-decoration:none;color:inherit;
box-shadow:0 1px 2px rgba(20,36,46,.04),0 10px 30px -14px rgba(20,36,46,.16);
transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.yorum-kart::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.yk-google::before{background:linear-gradient(90deg,#4285F4,#EA4335 34%,#FBBC05 67%,#34A853)}
.yk-trustpilot::before{background:#00B67A}
.yorum-kart:hover{transform:translateY(-4px);border-color:#CFDDE2;
box-shadow:0 2px 4px rgba(20,36,46,.05),0 20px 44px -16px rgba(20,36,46,.22)}
.yk-ust{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;
letter-spacing:.01em;color:var(--ink)}
.yk-logo{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto}
.yk-logo svg{display:block;width:100%;height:100%}
.yk-orta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.yk-puan{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:500;
letter-spacing:-.028em;line-height:.95}
.yk-yildiz{color:#F5A623;font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:.09em;
white-space:nowrap}
.yk-yarim{opacity:.38}
.yk-adet{font-size:.92rem;color:var(--muted);margin-top:-2px}
.yk-link{margin-top:4px;font-size:.86rem;font-weight:600;color:var(--brass);
display:inline-flex;align-items:center;gap:6px}
.yk-link::after{content:"→";transition:transform .22s ease}
.yorum-kart:hover .yk-link::after{transform:translateX(3px)}
@media(max-width:700px){
.yorum-kartlar{grid-template-columns:1fr;max-width:460px;gap:14px}
.yorum-kart{padding:24px 22px;gap:11px}
.yk-orta{gap:11px}
}
}
/* ---- Ana sayfa: ameliyathane fotografi ----
"Uc ulkede egitim" bolumunun sag sutununda, kunye panelinin ustunde.
Iddianin hemen yaninda duruyor, ayri bir blok gibi durmuyor. */
.kunye-sutun{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.kanit-foto{margin:0;border-radius:var(--r);overflow:hidden;line-height:0}
.kanit-foto img{width:100%;height:auto;display:block;
aspect-ratio:16/9;object-fit:cover;object-position:center 42%}
@media(max-width:700px){
.kanit-foto img{aspect-ratio:3/2}
}
/* "Uc ulkede egitim" bolumu: iki sutun tepeden hizali.
center olunca kisa sutun uzun olanin ortasinda asili kaliyordu. */
.hakkimda-grid{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(32px,5vw,72px);align-items:stretch}
/* Ust satir: solda metin, sagda yatay fotograf — ikisi de ayni boyda.
Kunye tablosu altta, tam genislikte uc sutun. */
.hakkimda-grid{grid-template-areas:"metin foto" "kunye kunye"}
.hakkimda-sol{grid-area:metin;display:flex;flex-direction:column}
.hakkimda-sol .btn-row{margin-top:auto;padding-top:clamp(18px,2.2vw,28px)}
.kanit-foto{grid-area:foto;align-self:stretch}
.kanit-foto img{width:100%;height:100%;object-fit:cover;
object-position:center 38%;aspect-ratio:auto;min-height:260px}
.kunye-genis{grid-area:kunye;grid-template-columns:repeat(3,1fr);
margin-top:clamp(10px,1.4vw,18px)}
.kunye-genis .kunye:nth-child(2n){border-right:1px solid var(--line)}
.kunye-genis .kunye:nth-child(3n){border-right:0}
.kunye-genis .kunye:nth-last-child(-n+3){border-bottom:0}
@media(max-width:860px){
.hakkimda-grid{grid-template-areas:"metin" "foto" "kunye"}
.kanit-foto img{min-height:0;aspect-ratio:16/10}
.kunye-genis{grid-template-columns:1fr 1fr}
.kunye-genis .kunye:nth-child(3n){border-right:1px solid var(--line)}
.kunye-genis .kunye:nth-child(2n){border-right:0}
.kunye-genis .kunye:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:860px){ .hakkimda-grid{grid-template-columns:1fr} }
/* Kunye kartlari artik baglanti; metin rengi ve alt cizgi devralinmasin,
tiklanabilir oldugu hissedilsin. */
a.kunye{text-decoration:none;color:inherit;cursor:pointer}
a.kunye b{transition:color .2s ease}
a.kunye:hover b,a.kunye:focus-visible b{color:var(--accent)}
a.kunye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Baglantiyla gelince baslik ustte kalsin, sabit baslik altinda gizlenmesin. */
#belgeler,#diller,.hk-bolum{scroll-margin-top:clamp(80px,10vh,110px)}