/* Hey Güzelbahçe Kulübü: DESIGN (8) görsel dili. Gölge yok, gradyan yok, beyaz zeminde lavanta yok. */

/* Fontlar: yerel, OFL (fonts/OFL.txt). Değişken woff2; ağırlık aralığı tek dosyada. */
@font-face{font-family:'Oswald';font-weight:500 700;font-style:normal;font-display:swap;src:url(fonts/oswald-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-weight:500 700;font-style:normal;font-display:swap;src:url(fonts/oswald-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:'Inter';font-weight:400 600;font-style:normal;font-display:swap;src:url(fonts/inter-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-weight:400 600;font-style:normal;font-display:swap;src:url(fonts/inter-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}

:root{
  /* D8 renkleri: birebir */
  --color-deep-plum:#23002b; --color-lavender-shock:#e894ff;
  --color-espresso-brown:#291900; --color-ink-teal:#002629;
  --color-slate:#333333; --color-charcoal:#121212; --color-black:#000000;
  --color-paper-white:#ffffff; --color-mint-signal:#93ffe4; --color-amber-pulse:#ffac47;

  /* Font token adları D8; değerler ücretsiz yedek (Oswald, Inter) */
  --font-druk-condensed-super-desktop:'Oswald','Arial Narrow',Arial,sans-serif;
  --font-neue-montreal:'Inter',Arial,system-ui,sans-serif;
  --font-arial:Arial,system-ui,sans-serif;

  /* D8 type scale */
  --text-caption:12px; --leading-caption:1.43; --tracking-caption:-0.22px;
  --text-body-sm:14px; --leading-body-sm:1.43; --tracking-body-sm:-0.22px;
  --text-subheading:24px; --leading-subheading:1; --tracking-subheading:0.05px;
  --text-heading-sm:32px; --leading-heading-sm:0.85; --tracking-heading-sm:0.05px;
  --text-heading:58px; --leading-heading:1.1; --tracking-heading:-0.22px;
  --text-display:187px; --leading-display:0.85; --tracking-display:0.05px;
  --text-display-xl:317px; --leading-display-xl:0.78; --tracking-display-xl:0.05px;
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600;

  /* D8 spacing, layout, radius */
  --spacing-unit:8px; --spacing-8:8px; --spacing-16:16px; --spacing-32:32px; --spacing-40:40px;
  --spacing-48:48px; --spacing-160:160px; --spacing-192:192px;
  --page-max-width:1200px; --section-gap:64px; --card-padding:20px; --element-gap:8px;
  --radius-tags:6px; --radius-cards:14px; --radius-pills:9999px; --radius-buttons:9999px; --radius-special:24px;

  /* [UYARLAMA] D8'de değeri var, token adı yok */
  --color-hairline-dark:rgba(255,255,255,.2);
  --color-hairline-light:#e5e5e5;
  --tracking-display-em:.008em;

  /* [UYARLAMA] kenar boşluğu ve akışkan ölçek */
  --gutter:20px;
  --hero-gutter:8px;
  --text-heading-fluid:clamp(32px,9vw,58px);
}
@media(min-width:600px){:root{--gutter:32px}}
@media(min-width:960px){:root{--gutter:48px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-deep-plum);color:var(--color-paper-white);
  font:400 16px/1.55 var(--font-neue-montreal);letter-spacing:-.22px;-webkit-font-smoothing:antialiased;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility}
p{text-wrap:pretty}
h2,h3,summary{text-wrap:balance}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
[hidden]{display:none!important}
.ik{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ik-buyuk{width:24px;height:24px;color:var(--color-lavender-shock)}

/* Bölümler */
.bolum{padding:var(--section-gap) 0}
.plum{background:var(--color-deep-plum);color:var(--color-paper-white)}
.beyaz{background:var(--color-paper-white);color:var(--color-slate)}
.kap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:960px){.bolum{padding:var(--spacing-160) 0}}
.hero{padding-top:0}
.hero{padding-bottom:0}
/* Halftone "Hey Club" (halftone.js): içerik kolonuna (nav logosu sol kenarı ile buton sağ kenarı arası) tam oturur.
   --hk-fit = Oswald 700 mürekkep genişliği / 100. F = kolon / hk-fit. Yükseklik = F x (cap .821 + alt uzantı .168) + 2 x 20px. */
.halftone{--hk-fit:3.526;--hk-w:calc(min(100vw,var(--page-max-width)) - 2 * var(--gutter));position:relative;width:100%;overflow:hidden;margin-top:var(--spacing-16);background:var(--color-deep-plum);
  height:calc(var(--hk-w) / var(--hk-fit) * .989 + 40px);touch-action:pan-y}
.halftone canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.halftone-yedek{position:absolute;inset:0;overflow:hidden}
.halftone-yedek .satir{position:absolute;left:0;top:calc(20px - .131em);margin:0 0 0 -.063em;font-size:calc(100cqi / var(--fit))}
.halftone.hazir .halftone-yedek{visibility:hidden}
.bolum-bitisik{padding-top:0}

/* Odak */
.plum a:focus-visible,.plum button:focus-visible,.plum input:focus-visible,.plum select:focus-visible,.plum textarea:focus-visible,.plum summary:focus-visible,.plum [tabindex]:focus-visible{outline:2px solid var(--color-paper-white);outline-offset:3px}
.beyaz a:focus-visible,.beyaz summary:focus-visible,dialog a:focus-visible,dialog button:focus-visible{outline:2px solid var(--color-black);outline-offset:3px}

/* Wordmark */
.wordmark{display:block;font:500 28px/1 var(--font-druk-condensed-super-desktop);letter-spacing:var(--tracking-display-em);color:var(--color-lavender-shock);text-decoration:none;width:max-content}
.footer .wordmark{margin-top:0}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:12px 0;gap:var(--spacing-16)}
.nav-linkler{display:none}
@media(min-width:960px){
  .nav-linkler{display:flex;gap:12px}
}

/* Display sistemi: satır, kabın genişliğini --fit (em cinsinden satır genişliği) ile doldurur */
.blok{container-type:inline-size;overflow-x:clip;font-weight:400;--kap:calc(100vw - 2 * var(--gutter))}
.satir{display:flex;align-items:baseline;white-space:nowrap;
  font-family:var(--font-druk-condensed-super-desktop);font-weight:700;letter-spacing:var(--tracking-display-em);
  font-size:min(var(--tavan,var(--text-display)),calc(100cqi / var(--fit)));
  line-height:var(--lh,.85);margin-left:-.04em;color:var(--blok-renk,inherit)}
@supports not (width:1cqi){
  .satir{font-size:min(var(--tavan,var(--text-display)),calc(var(--kap) / var(--fit)))}
}
.plum .satir{color:var(--color-lavender-shock)}
.beyaz .satir{color:var(--color-black)}
.dsp{display:block}
.bag{font-family:var(--font-neue-montreal);font-weight:600;font-size:.26em;line-height:1;letter-spacing:-.22px;margin:0 .45em 0 .6em;text-transform:none}
.satir .dsp + .bag{margin:0 0 0 .6em}
.italik{transform:skewX(-10deg);transform-origin:left bottom}
.nane{background:var(--color-mint-signal);color:inherit;display:inline-block;padding:0 .08em;line-height:.8}
@media(min-width:960px){.blok.d60{width:60%}}
/* Türkçe işaretler (Ç, İ, Ü) komşu satıra binmesin: satır yüksekliği ≤1 kalır, boşluk margin ile */
.d60{margin-top:var(--spacing-16)}
.blok .satir + .satir{margin-top:.12em}
.badge + .d60{margin-top:var(--spacing-32)}
.blok .satir + .satir{margin-top:.12em}

/* Badge */
.badge{display:inline-block;border-radius:var(--radius-tags);padding:4px 10px;font:500 var(--text-caption)/var(--leading-caption) var(--font-neue-montreal);letter-spacing:.04em}
.badge-lav{background:var(--color-lavender-shock);color:var(--color-deep-plum)}
.badge-amber{background:var(--color-amber-pulse);color:var(--color-charcoal)}

/* Butonlar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:var(--radius-buttons);
  font:500 var(--text-body-sm)/var(--leading-body-sm) var(--font-neue-montreal);letter-spacing:var(--tracking-body-sm);text-decoration:none;cursor:pointer}
/* Plaka (dugme.js, "Induction Button"): yedek görünüm = koyu plum plaka + 1px lavanta çerçeve + yumuşak lavanta parıltı.
   WebGL hazır olunca JS .ind-gl ekler: çerçeve ve parıltı kalkar, canvas (kutudan 16px taşan ark bulutu) çizer. */
:root{--plaka:#1a0020;--plaka-cerceve:rgba(232,148,255,.55)}
.btn,.nav-linkler a,.footer-liste a,.footer-liste .statik{position:relative;isolation:isolate;background:var(--plaka);color:var(--color-paper-white);
  border:1px solid var(--color-lavender-shock);box-shadow:0 0 14px rgba(232,148,255,.32);text-decoration:none}
.nav-linkler a,.footer-liste a,.footer-liste .statik{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--radius-pills);border-color:var(--plaka-cerceve);box-shadow:0 0 8px rgba(232,148,255,.2);
  font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm)}
.footer-liste a,.footer-liste .statik{min-height:44px}
.btn,.nav-linkler a,.footer-liste a{transition:transform .22s cubic-bezier(.34,1.4,.5,1)}
.btn:hover,.nav-linkler a:hover,.footer-liste a:hover{transform:translateY(-2px)}
.btn:active,.nav-linkler a:active,.footer-liste a:active{transform:translateY(1px) scale(.99)}
.ind-gl{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.ind-cv{position:absolute;inset:-17px;width:calc(100% + 34px);height:calc(100% + 34px);z-index:-1;pointer-events:none;display:block}
.btn-kucuk{padding:12px 20px;min-width:80px}
.btn[aria-busy="true"]{pointer-events:none}
.yukleme{animation:don 1s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}

/* Hero altı */
.lead{max-width:38ch;margin-bottom:var(--spacing-32);font-size:18px;line-height:1.5}
.mikro{font-size:var(--text-body-sm);line-height:1.5;letter-spacing:var(--tracking-body-sm);max-width:52ch}
.alt-metin{margin-top:var(--spacing-32);max-width:52ch;font-size:18px;line-height:1.5}

/* Kartlar */
.kartlar{display:grid;gap:var(--spacing-16);margin-top:var(--spacing-48)}
@media(min-width:960px){.kartlar{grid-template-columns:repeat(3,1fr)}}
.kart{border-radius:var(--radius-cards);padding:var(--card-padding)}
.kart-acik{background:var(--color-paper-white);color:var(--color-slate);border:1px solid var(--color-hairline-light)}
.kart-koyu{background:var(--color-espresso-brown);color:var(--color-paper-white)}
.kart p{max-width:34ch}
.kart h3{font:700 var(--text-subheading)/var(--leading-subheading) var(--font-druk-condensed-super-desktop);letter-spacing:var(--tracking-display-em);color:var(--color-charcoal);margin-bottom:var(--spacing-8)}

/* Kurucu */
.liste{margin-top:var(--spacing-40);display:grid;gap:var(--spacing-16)}
.liste li{display:flex;gap:12px;align-items:flex-start;max-width:52ch}
.liste .ik{color:var(--color-charcoal);margin-top:1px}
.kurucu-not,#sayac-kap p{margin-top:var(--spacing-16)}
#sayac-kap b{color:var(--color-charcoal);font-weight:600}
.beyaz .badge-amber{margin-bottom:0}
.beyaz .badge{margin-top:0}

/* Kayıt */
.kayit-grid{display:grid;gap:var(--spacing-48)}
@media(min-width:960px){.kayit-grid{grid-template-columns:5fr 6fr;gap:var(--spacing-48);align-items:start}}
.uye-karti{position:relative;width:min(100%,340px);aspect-ratio:1.586;margin-top:var(--spacing-32);margin-bottom:var(--spacing-16);display:block}
.uye-karti .wordmark{position:absolute;left:var(--card-padding);top:var(--card-padding);font-size:28px}
.kart-badge{position:absolute;right:var(--card-padding);top:var(--card-padding)}
.kart-alt{position:absolute;left:var(--card-padding);right:var(--card-padding);bottom:var(--card-padding);display:flex;flex-direction:column;gap:4px}
.kart-etiket{font-size:var(--text-caption);letter-spacing:.04em}
.kart-ad{font:700 44px/.85 var(--font-druk-condensed-super-desktop);letter-spacing:var(--tracking-display-em);color:var(--color-lavender-shock);overflow-wrap:anywhere}
.kart-ad.orta{font-size:var(--text-heading-sm)}

/* Form */
.form{display:grid;gap:var(--spacing-32);max-width:560px}
.alan{border:0;padding:0;margin:0;min-width:0;scroll-margin-top:96px}
.alan label,.alan legend{display:block;font-weight:600;font-size:16px;line-height:1.3;margin-bottom:var(--element-gap);padding:0}
.alan label.kutu,.alan label.pill{font-weight:400;margin:0}
.alan label.kutu{display:flex}
.alan label.pill{display:inline-flex}
.istege{font-weight:400}
.yardim{font-size:var(--text-body-sm);line-height:1.5;letter-spacing:var(--tracking-body-sm);margin:-4px 0 var(--element-gap)}
.girdi{width:100%;min-height:48px;padding:0 20px;border-radius:var(--radius-pills);border:1px solid var(--color-lavender-shock);background:transparent;color:var(--color-paper-white);
  font:400 16px/1.4 var(--font-neue-montreal);letter-spacing:-.22px;color-scheme:dark;-webkit-appearance:none;appearance:none}
.girdi:hover{border-width:2px;padding:0 19px}
.girdi-alan{border-radius:var(--radius-special);padding:16px 20px;resize:vertical;min-height:96px}
.girdi-alan:hover{padding:15px 19px}
select.girdi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e894ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px;padding-right:48px}
select.girdi option{background:var(--color-deep-plum);color:var(--color-paper-white)}
.tabnum{font-variant-numeric:tabular-nums}
.sayac,#sayac-kap b{font-variant-numeric:tabular-nums}
.alan.hatali .girdi{border:2px solid var(--color-paper-white);padding:0 19px}
.alan.hatali .girdi-alan{padding:15px 19px}
.hata{display:flex;gap:8px;align-items:flex-start;margin-top:var(--element-gap);font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm)}
.hata .ik{width:16px;height:16px;color:var(--color-lavender-shock);margin-top:2px}
.oneri{margin-top:var(--element-gap);font-size:var(--text-body-sm)}
.oneri button{background:none;border:0;padding:12px 0;min-height:44px;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sayac{text-align:right;margin-top:var(--element-gap)}

/* Pill toggle */
.cipler{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;gap:8px;min-width:80px;min-height:48px;padding:0 20px;justify-content:center;border-radius:var(--radius-pills);border:1px solid var(--color-lavender-shock);color:var(--color-paper-white);font:500 var(--text-body-sm)/1 var(--font-neue-montreal);letter-spacing:var(--tracking-body-sm)}
.pill .ik{display:none;width:16px;height:16px}
.pill:hover span{border-width:2px;padding:0 19px}
.pill input:checked + span{background:var(--color-lavender-shock);color:var(--color-deep-plum)}
.pill input:checked + span .ik{display:block}
.pill input:focus-visible + span{outline:2px solid var(--color-paper-white);outline-offset:3px}

/* Checkbox */
.kutu{position:relative;display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer;font-size:var(--text-body-sm);line-height:1.4}
.kutu input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.kutu-isaret{flex:none;width:24px;height:24px;border-radius:var(--radius-tags);border:1px solid var(--color-lavender-shock);display:grid;place-items:center;color:transparent}
.kutu-isaret .ik{width:16px;height:16px}
.kutu input:checked + .kutu-isaret{background:var(--color-lavender-shock);color:var(--color-deep-plum)}
.kutu input:focus-visible + .kutu-isaret{outline:2px solid var(--color-paper-white);outline-offset:3px}
.kutu a{text-decoration:underline}
.alan.hatali .kutu-isaret{border:2px solid var(--color-paper-white)}

/* Hata özeti, gönderim hatası */
.hata-ozet,.gonder-hata{display:grid;gap:8px;justify-items:start}
.hata-ozet ul{display:grid;gap:4px}
.hata-ozet a{text-decoration:underline}

/* Başarı */
.basari{max-width:560px;display:grid;gap:var(--spacing-16);justify-items:start}
.basari-baslik{display:flex;gap:12px;align-items:center;font:700 var(--text-heading-sm)/var(--leading-heading-sm) var(--font-druk-condensed-super-desktop);letter-spacing:var(--tracking-display-em);color:var(--color-paper-white)}
.basari-baslik:focus{outline:none}
.vurgu{font-weight:600}
.butonlar{display:flex;flex-wrap:wrap;gap:12px}

/* SSS */
.sss{margin-top:var(--spacing-48);max-width:760px}
details{border-bottom:1px solid var(--color-hairline-light)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:8px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--color-charcoal)}
summary::-webkit-details-marker{display:none}
summary .ik{color:var(--color-charcoal)}
details[open] summary .ik{transform:rotate(180deg)}
details p{padding:0 0 20px;max-width:60ch}
.beyaz a{color:var(--color-charcoal);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.plum a{text-underline-offset:.18em}
.beyaz a:hover{text-decoration-thickness:3px}

/* İşletmeler */
.form-kolon{margin-top:var(--spacing-32)}
#isletme-ac{margin-top:var(--spacing-32)}

/* Footer */
.footer{padding-top:0;padding-bottom:var(--spacing-48)}
.footer-liste{margin-top:var(--spacing-32);display:flex;flex-wrap:wrap;gap:12px}
body.serit-acik .footer{padding-bottom:96px}

/* Yapışkan şerit */
.serit{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-deep-plum);border-top:1px solid var(--color-hairline-dark);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));font-size:var(--text-body-sm)}
@media(min-width:960px){.serit{display:none!important}}

/* Diyalog */
dialog{border:0;padding:var(--spacing-32) var(--gutter) var(--spacing-48);background:var(--color-paper-white);color:var(--color-slate);margin:auto 0 0;width:100%;max-width:none;border-radius:var(--radius-special) var(--radius-special) 0 0;max-height:90vh;overflow:auto;position:fixed}
dialog::backdrop{background:rgba(35,0,43,.8)}
dialog h2{font:700 var(--text-heading-sm)/var(--leading-heading-sm) var(--font-druk-condensed-super-desktop);color:var(--color-charcoal);margin:0 48px var(--spacing-16) 0}
dialog p{margin-bottom:var(--spacing-16)}
.dialog-kapat{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--color-charcoal);cursor:pointer}
@media(min-width:600px){dialog{margin:auto;width:560px;border-radius:var(--radius-special);position:fixed}}

/* KVKK sayfası */
.taslak-not{background:var(--color-amber-pulse);color:var(--color-charcoal);padding:20px var(--gutter);font-weight:600;font-size:18px;line-height:1.3}
.metin{max-width:720px;display:grid;gap:var(--spacing-16)}
.metin h2{font:700 var(--text-subheading)/1.1 var(--font-druk-condensed-super-desktop);color:var(--color-charcoal);margin-top:var(--spacing-24,24px)}
.metin-h1{font:700 clamp(36px,9vw,56px)/1.05 var(--font-druk-condensed-super-desktop);color:var(--color-black);margin-bottom:8px}
.bos-alan{display:inline-block;min-width:12ch;border-bottom:1px dashed var(--color-slate)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .yukleme{animation:none}
  .btn,.nav-linkler a,.footer-liste a{transition:none;transform:none!important}
  *{transition:none!important}
}

/* Hero alt blok: rozet, h1 (okunur boy), lead, CTA */
.hero-alt{padding-top:var(--spacing-32);padding-bottom:var(--section-gap)}
.hero-h1{font:700 clamp(28px,6.4vw,44px)/1.05 var(--font-druk-condensed-super-desktop);letter-spacing:var(--tracking-display-em);color:var(--color-paper-white);margin:var(--spacing-16) 0;max-width:20ch}
@media(min-width:960px){.hero-alt{padding-bottom:var(--spacing-160)}}


.metin ul{display:grid;gap:6px;padding-left:20px;list-style:disc}
dialog .metin h2{font:700 24px/1.1 var(--font-druk-condensed-super-desktop);color:var(--color-charcoal);margin-top:var(--spacing-16)}
dialog .metin{max-width:none}