/* Sena Ergin — palet "Kireç & Petrol" (marka-kiti/gorsel-dil.md)
   Norentix · 2026-09-09 · JS yok · stil ekseni: Exaggerated Minimalism (ui-ux-pro-max)
   Kontrast: her metin/zemin çifti ölçüldü, WCAG AA geçiyor (SITE-NOTLARI § Kontrast tablosu) */

/* --- fontlar: kendi sunucumuzda, üçüncü taraf isteği yok --- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(../fonts/BricolageGrotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url(../fonts/BricolageGrotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/InstrumentSans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/InstrumentSans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* yalnız wordmark "Sena Ergin" için alt küme — 96 KB yerine 4 KB */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/Newsreader-wordmark.woff2) format("woff2");
  unicode-range:U+20,U+45,U+53,U+61,U+65,U+67,U+69,U+6E,U+72}

:root{
  --koyu:#1F1C1A; --kirec:#EFE8DD; --kum:#BFB2A0; --petrol:#2F7D82; --sis:#7A7268;
  /* petrolün koyu tonu: YALNIZ küçük metnin üstüne geldiği zeminlerde (damga, kapanış bandı).
     Marka petrolü #2F7D82 kireç metinle 3,94:1 kalıyor — küçük metin için yetersiz. Bu ton 4,84:1. */
  --petrol-derin:#296E72;
  --cizgi:rgba(31,28,26,.16); --cizgi-koyu:rgba(239,232,221,.18);
  --bas:"Bricolage Grotesque",system-ui,sans-serif;
  --gov:"Instrument Sans",system-ui,sans-serif;
  --ser:"Newsreader",Georgia,serif;
  --wrap:1160px; --r:10px;
  --bosluk-sec:clamp(88px,12vw,168px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--kirec);color:var(--koyu);font:400 18px/1.6 var(--gov);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--bas);font-weight:800;margin:0}
h1{font-size:clamp(3.2rem,11vw,8.5rem);letter-spacing:-.045em;line-height:.94;max-width:15ch}
h2{font-size:clamp(2.1rem,6vw,4.4rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.02em;line-height:1.18}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
strong{font-weight:700}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--orta{width:min(100% - 40px,940px)}
.wrap--dar{width:min(100% - 40px,780px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--koyu);color:var(--kirec);padding:12px 18px;border-radius:var(--r)}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
main:focus{outline:none}

/* --- nav --- */
.nav{position:sticky;top:0;z-index:20;background:rgba(239,232,221,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cizgi)}
.nav__in{display:flex;align-items:center;gap:24px;min-height:68px}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:9px;margin-right:auto;flex:none}
.mark__ad{font-family:var(--ser);font-size:23px;font-weight:500}
.mark__rol{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--koyu);opacity:.72;text-transform:uppercase}
/* min-width:0 ŞART — flex öğesinin varsayılanı min-width:auto'dur ve içeriğinin altına
   inmeyi reddeder; o zaman overflow-x devreye girmez ve şerit tüm sayfayı genişletir
   (375px'te ölçüldü: sayfa yatay taşıyordu). */
.nav__links{display:flex;gap:26px;min-width:0}
.nav__links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--koyu);opacity:.8;
  padding:10px 0;white-space:nowrap;border-bottom:2px solid transparent}
.nav__links a:hover{opacity:1;border-bottom-color:var(--petrol)}
/* küçük ekranda CTA etiketi kısalır; erişilebilir ad <a aria-label> ile sabit kalır */
.btn__kisa{display:none}

/* --- butonlar / bağlantılar --- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 26px;
  border-radius:var(--r);background:var(--koyu);color:var(--kirec);text-decoration:none;
  font-weight:700;font-size:16px;letter-spacing:.01em;border:1px solid var(--koyu);
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{background:var(--petrol-derin);border-color:var(--petrol-derin)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:14.5px;flex:none}
.btn--buyuk{min-height:58px;padding:17px 36px;font-size:18px}
.btn--ghost{background:transparent;color:var(--kirec);border-color:rgba(239,232,221,.55)}
.btn--ghost:hover{background:rgba(239,232,221,.14);border-color:var(--kirec);color:var(--kirec)}
.link{display:inline-block;text-decoration:none;font-weight:700;line-height:1.4;padding:11px 0;
  color:var(--koyu);border-bottom:2px solid var(--petrol)}
.link:hover{border-bottom-color:var(--koyu)}
.sec--koyu .link,.footer .link{color:var(--kirec)}
.sec--koyu .link:hover,.footer .link:hover{border-bottom-color:var(--kirec)}
.mikro{display:block;font-size:13px;font-weight:500;color:var(--koyu);opacity:.72;margin:8px 0 0;max-width:none}
.sec--koyu .mikro,.hero .mikro{color:var(--kum);opacity:1}
.mikro--alt{margin-top:10px}
.cta-sarma{display:inline-block}

/* --- hero --- */
.hero{position:relative;background:var(--koyu);color:var(--kirec);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(31,28,26,.30) 0%,rgba(31,28,26,.55) 55%,rgba(31,28,26,.88) 100%)}
.hero__in{padding:clamp(140px,18vw,220px) 0 clamp(104px,12vw,150px);max-width:900px}
.tag{display:inline-block;background:var(--petrol-derin);color:var(--kirec);font-size:12.5px;font-weight:700;
  letter-spacing:.22em;padding:9px 16px;border-radius:7px;margin-bottom:30px}
.hero h1{color:var(--kirec)}
.hero__alt{margin:clamp(26px,3vw,38px) 0 clamp(30px,4vw,42px);font-size:clamp(17px,2.1vw,21px);color:var(--kum);max-width:58ch}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.hero .btn:not(.btn--ghost){background:var(--kirec);color:var(--koyu);border-color:var(--kirec)}
.hero .btn:not(.btn--ghost):hover{background:var(--petrol-derin);color:var(--kirec);border-color:var(--petrol-derin)}

/* --- bölümler --- */
.sec{padding:var(--bosluk-sec) 0}
.sec--koyu{background:var(--koyu);color:var(--kirec)}
.sec--koyu h2,.sec--koyu h3{color:var(--kirec)}
.sec--koyu p{color:var(--kum)}
.kicker{display:block;font-size:19px;font-weight:700;letter-spacing:.14em;color:var(--petrol);
  margin-bottom:16px;text-transform:uppercase;font-family:var(--bas)}
.sec h2{margin-bottom:clamp(28px,4vw,44px)}
.sec__giris{font-size:clamp(17px,2vw,20px);margin-bottom:clamp(40px,5vw,64px)}
.one-cikan{font-size:clamp(19px,2.6vw,26px);line-height:1.45;font-weight:500;max-width:44ch;
  margin-bottom:clamp(36px,5vw,56px);color:var(--kirec)}
.sec:not(.sec--koyu) .one-cikan{color:var(--koyu)}

/* tanım cümlesi: bölümün ilk ve en önemli cümlesi (AI motorlarının alıntıladığı yer) */
.tanim{font-size:clamp(18px,2.2vw,22px);line-height:1.5;max-width:52ch;margin-bottom:clamp(36px,5vw,54px)}

/* --- soru/cevap blokları --- */
.qa{display:grid;gap:clamp(30px,4vw,48px)}
.qa article{border-top:2px solid var(--petrol);padding-top:22px}
.qa h3{margin-bottom:12px}
.qa p{margin:0;color:var(--koyu);opacity:.82}
.qa--koyu p,.sec--koyu .qa p{color:var(--kum);opacity:1}

/* --- süreç --- */
.adimlar{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.adimlar li{border-top:2px solid var(--petrol);padding-top:20px}
.adim__no{display:block;font-family:var(--bas);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);
  color:var(--petrol);letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.adimlar h3{margin-bottom:10px}
.adimlar p{font-size:16px;margin:0}
.adimlar details{margin-top:14px}
.adimlar summary{cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--kirec);
  padding:8px 0;min-height:44px;display:flex;align-items:center;gap:8px}
.adimlar summary::-webkit-details-marker{display:none}
.adimlar summary::after{content:"+";color:var(--petrol);font-size:20px;line-height:1}
.adimlar details[open] summary::after{content:"–"}
.adimlar details p{font-size:15.5px;padding-bottom:6px}
.adimlar--sade li{padding-top:18px}
.adimlar--sade h3{margin:0}

/* --- hizmet kartları --- */
.kartlar{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.kart{border-top:3px solid var(--petrol);padding-top:26px}
.kart h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:20px}
.kart p{font-size:16.5px;color:var(--koyu);opacity:.84;margin-bottom:16px}
.kart strong{opacity:1}

/* --- işler --- */
/* 4 kart → 2×2. minmax tabanı 420px: 1160px'te üç kolon sığmaz, dördüncü kart yalnız kalmaz. */
.isler{display:grid;gap:clamp(30px,4vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.is{margin:0}
.is img{border-radius:14px;margin-bottom:22px}
.is h3{margin-bottom:12px}
.is p{font-size:16px;margin-bottom:10px}
.kunye{font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--kum);margin:0 0 6px}
.not{display:block;font-size:13px;color:var(--kum);letter-spacing:.02em;margin:0;max-width:none}
.sec:not(.sec--koyu) .not,.sec:not(.sec--koyu) .kunye{color:var(--koyu);opacity:.7}

/* --- ikili blok / hakkında --- */
.ikili{display:grid;gap:clamp(38px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
.hak__foto{margin:0}
.ikili--foto img{border-radius:14px;margin-bottom:14px}
.alinti{margin:0 0 26px;padding:2px 0 2px 22px;border-left:3px solid var(--petrol)}
.alinti p{font-family:var(--bas);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.28;letter-spacing:-.02em;color:var(--kirec);margin:0 0 10px;max-width:26ch}
.alinti cite{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--kum)}

/* --- hizmet bölgesi --- */
.ilceler{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px;padding:0}
.ilceler li{border:1px solid var(--cizgi);border-radius:99px;padding:9px 18px;font-size:15.5px;font-weight:600}

/* --- sss --- */
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--bas);font-weight:700;
  font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.3;display:flex;justify-content:space-between;
  align-items:center;gap:16px;min-height:44px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";color:var(--petrol);font-size:28px;line-height:1;flex:none}
.sss details[open] summary::after{content:"–"}
.sss p{color:var(--koyu);opacity:.82;padding-bottom:24px;margin:0;max-width:68ch;font-size:16.5px}

/* --- kapanış --- */
.cta{background:var(--petrol-derin);color:var(--kirec);padding:clamp(76px,10vw,120px) 0;text-align:center}
.cta h2{font-size:clamp(1.8rem,4.4vw,3rem);color:var(--kirec);margin:0 auto clamp(30px,4vw,42px);max-width:22ch}
.cta .nb{display:inline}
.cta .btn,.sec--koyu .btn:not(.btn--ghost){background:var(--kirec);color:var(--koyu);border-color:var(--kirec)}
.sec--koyu .btn:not(.btn--ghost):hover{background:#fff;border-color:#fff}
.cta .btn:hover{background:var(--koyu);color:var(--kirec);border-color:var(--koyu)}
.cta__liste{margin:26px auto 0;max-width:52ch;font-size:15.5px;color:var(--kirec);line-height:1.7}

/* --- footer --- */
.footer{background:var(--koyu);color:var(--kum);padding:clamp(44px,6vw,64px) 0}
.footer__in{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.mark--footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:0}
.footer .mark__ad{color:var(--kirec)}
.footer .mark__rol{color:var(--kum);opacity:1}
.footer__yer{flex-basis:100%;margin:8px 0 0;font-size:14.5px;color:var(--kum)}
.footer__telif{margin:0;font-size:14.5px;color:var(--kum)}

/* --- mobil --- */
@media (min-width:641px){.cta .nb{display:block}}
@media (max-width:900px){
  /* menü GİZLENMEZ — yatay kaydırılabilir şeride döner (JS gerekmiyor) */
  .nav__links{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;margin-right:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__in{gap:16px}
}
@media (max-width:768px){
  html{scroll-padding-top:64px}
  .hero__cta .btn{width:100%}
  .hero__cta .cta-sarma{width:100%}
}
@media (max-width:560px){
  /* CTA etiketi kısalır: şeride ~130px daha yer açar, sticky bar tek satır kalır */
  .btn__uzun{display:none}
  .btn__kisa{display:inline}
  .mark__rol{display:none}
  .nav__in{min-height:56px;gap:12px}
  .nav .btn{white-space:nowrap;font-size:13.5px;padding:10px 14px;min-height:42px}
  .mark__ad{font-size:21px}
  .footer__in{flex-direction:column;align-items:flex-start}
}