@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 500;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-ext-6441e9.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:'Fraunces';font-style:normal;font-weight:300 500;font-stretch:100%;font-display:swap;src:url(/assets/fonts/fraunces-latin-63f165.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:'Fraunces';font-style:normal;font-weight:300 500;font-stretch:100%;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext-1fba8b.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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-1ab1ad.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-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-ext-749a30.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:'Unbounded';font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/unbounded-latin-ext-936fcc-alt.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 Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-a20ac7.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 Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-ext-fa1a1a.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}
:root{
  --base:#e9e5e0;
  --ink:#1a1613;
  --ink-soft:#6b625b;
  --ink-faint:#a89f97;
  --line:rgba(26,22,19,.16);
  /* referans arduvaz/slate tonları — arc + detay için */
  --slate:#3f4548;
  --slate-soft:#8b9295;
  --slate-faint:#adb3b4;
  --peach:#e9a97f; --coral:#e08a5e; --pink:#efb9d2; --magenta:#e79fc4; --blue:#c8d9de;
  --gutter: clamp(18px, 4vw, 54px);
  --font-display:"Bricolage Grotesque", "Inter", sans-serif;   /* slider etiketleri */
  --font-heading:"Fraunces", Georgia, serif;                    /* büyük ana başlıklar */
  --font-ui:"Inter", -apple-system, system-ui, sans-serif;

  /* arc geometry (JS ile de okunuyor) */
  --arc-radius: 1950px;
  --arc-top: 11vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{background:var(--base)}
/* DIKKAT: html/body'ye `overflow:hidden` KOYMA.
   iOS Safari sayfa yuklenirken "kaydirilan belge mi" karari veriyor; overflow:hidden
   ile yuklenen sayfayi cerceveli yerlesime kilitliyor ve sonradan JS ile kaydirma
   acilsa bile icerik durum cubugunun altina gecmiyor (03.08.2026, iPhone'da dogrulandi).
   Kaydirmaya gerek yok zaten: tum .view'lar position:fixed, akista icerik yok. */
html,body{background:var(--base);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
html{overscroll-behavior:none}
/* ===== aurora background ===== */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--base)}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;will-change:transform}
.blob.b1{width:60vw;height:60vw;left:-10vw;bottom:-20vw;background:radial-gradient(circle at 40% 40%, var(--peach), transparent 62%);animation:d1 26s ease-in-out infinite}
.blob.b2{width:55vw;height:55vw;right:-8vw;bottom:-16vw;background:radial-gradient(circle at 60% 40%, var(--coral), transparent 60%);animation:d2 32s ease-in-out infinite}
.blob.b3{width:70vw;height:70vw;left:12vw;bottom:-30vw;background:radial-gradient(circle at 50% 50%, var(--pink), transparent 62%);animation:d3 30s ease-in-out infinite}
.blob.b4{width:52vw;height:52vw;right:-2vw;bottom:-22vw;background:radial-gradient(circle at 40% 60%, var(--blue), transparent 60%);animation:d4 34s ease-in-out infinite}
.blob.b5{width:44vw;height:44vw;left:36vw;bottom:-12vw;background:radial-gradient(circle at 50% 50%, var(--magenta), transparent 64%);animation:d1 38s ease-in-out infinite reverse}
/* Sekme arkaplandayken hiçbir şey dönmesin (tarayıcı her zaman kısmıyor). */
html.dinlen .blob{animation-play-state:paused}
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-5vh) scale(1.12)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-6vh) scale(1.15)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,4vh) scale(1.1)}}
@keyframes d4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,5vh) scale(1.18)}}
.aurora::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 8.33%);pointer-events:none}
.topbar>*{pointer-events:auto}
/* ===== iOS Safari: kaydırırken alt araç çubuğu küçülüp şeffaflaşsın =====
   Safari alt barını YALNIZCA belge (document) kaydırıldığında toplar.
   Sitede kaydırma .kd-scroll iç kutusunda olduğu için (html,body → overflow:hidden)
   bar hep tam boyda ve opak kalıyordu. Mobilde bir detay katmanı açıkken
   kaydırmayı iç kutudan alıp belgeye devrediyoruz → bar normal davranışına döner.
   Sınıfı JS ekler: kdSyncDocScroll().
   600px bilinçli seçildi: .kd-left (sticky + height:100vh) bu genişlikte zaten
   gizli, yani toplanan bar ile 100vh arasında zıplama oluşmuyor. */
@media(max-width:600px){
  html.kd-doc-scroll,html.kd-doc-scroll body{height:auto}
  html.kd-doc-scroll .kdetay.open{position:relative;inset:auto;min-height:100vh;min-height:100svh}
  /* relative (static değil) — z-index:1 korunmalı, yoksa .kd-aurora metnin üstüne biner */
  html.kd-doc-scroll .kdetay.open .kd-scroll{position:relative;inset:auto;overflow:visible;overscroll-behavior:auto;-webkit-overflow-scrolling:auto}
  /* iOS Safari, ekrani kaplayan `position:fixed` bir eleman varken yerlesimi
     buyutmuyor -> icerik durum cubugunun altina gecmiyor, ust/altta serit kaliyor.
     (03.08.2026, tam-ekran-testi-5 ile birebir dogrulandi.)
     Detay katmani acikken ekrani kaplayan TUM sabit katmanlari devre disi birak;
     zaten hepsi katmanin arkasinda kaliyor, gorunmuyorlar. */
  html.kd-doc-scroll .view,
  html.kd-doc-scroll > body > .aurora,
  html.kd-doc-scroll #preloader,
  html.kd-doc-scroll #journey,
  html.kd-doc-scroll #fogtrans,
  html.kd-doc-scroll .page-layer,
  html.kd-doc-scroll .yt-gallery:not(.open),
  html.kd-doc-scroll .kdetay:not(.open),
  /* .topbar ekranin EN UST kenarina yapisik (top:0) tam genislikte sabit bir cubuk.
     Ekrani kaplamadigi icin ilk taramada yakalanmamisti ama Safari'nin icerigi durum
     cubugunun altina gecirmesini engelleyen sey buydu: alt taraf tam ekran calisiyor
     (alttaki sabit butonlar engel degil), ust taraf calismiyordu.
     Detay katmani acikken zaten katmanin arkasinda, gorunmuyor. */
  html.kd-doc-scroll .topbar{display:none!important}
  /* Üyelik paneli açıkken ALTTAKİ katmanı da gizle. Mobilde katmanlar belge
     akışında durduğu için, panel yazının ALTINA ekleniyordu: yukarı kaydırınca
     okunan yazı görünüyordu (09.08.2026). Panel tek başına kalınca belge yalnızca
     onu içeriyor — sabit, bağımsız bir sayfa gibi davranıyor. */
  html.uy-tekbasina .kdetay.open:not(.uyelik){display:none!important}
  /* katmanin kendi aurora'si sabit kalamaz -> icerikle birlikte akar */
  html.kd-doc-scroll .kdetay.open .kd-aurora{position:absolute;height:100%}
}
.kd-meta{font-family:var(--font-ui);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:clamp(14px,2vh,22px)}
.blog-head{max-width:820px;margin:0 auto clamp(34px,5vh,60px);text-align:center}
.blog-head h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(46px,7vw,92px);color:var(--slate);line-height:1;margin:10px 0 14px}
.blog-head p{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--slate-soft);margin:0 auto;max-width:520px}
.blog-kart-parca mark,.blog-card h3 mark,.blog-card p mark{
  background:rgba(216,180,226,.42);color:inherit;border-radius:3px;padding:0 2px}
.blog-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(20px,2.4vw,32px)}
.blog-card.is-hidden{display:none}
.blog-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border-radius:18px;border:1px solid rgba(60,64,67,.12);background:rgba(255,255,255,.42);cursor:pointer;font:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(80,60,40,.16);border-color:rgba(176,140,80,.4)}
.blog-card-img{aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.04)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px}
.blog-card-meta{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft)}
.blog-card h3{font-family:var(--font-heading);font-weight:400;font-size:clamp(19px,1.7vw,23px);line-height:1.22;color:var(--slate);margin:0}
.blog-card p{font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:#5c6367;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-article{max-width:760px;margin:0 auto}
/* Yazının yarısı açık: son bölüm aşağı doğru solar, altında giriş kutusu. */
.blog-article.kilitli > p:last-of-type{-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.blog-kilit{margin-top:6px;padding:clamp(22px,4vw,34px);border-radius:18px;text-align:center;
  background:rgba(255,255,255,.5);border:1px solid rgba(60,64,67,.12);box-shadow:0 18px 44px rgba(90,70,50,.10)}
.blog-kilit .bk-bas{font-family:var(--font-heading);font-weight:300;font-size:clamp(22px,4.6vw,28px);color:var(--slate);margin:0 0 8px}
.blog-kilit .bk-ack{font-size:14.5px;line-height:1.55;color:#5c6367;margin:0 auto 18px;max-width:44ch}
.blog-kilit .bk-btn{font:inherit;font-size:14.5px;cursor:pointer;border-radius:100px;padding:13px 28px;color:var(--ink)}
.blog-art-hero{border-radius:16px;overflow:hidden;aspect-ratio:16/9;margin-bottom:clamp(24px,4vh,40px);box-shadow:0 24px 56px rgba(80,60,40,.18)}
.blog-art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.blog-art-meta{font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:12px}
.blog-article h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.12;color:var(--slate);margin:0 0 clamp(24px,4vh,40px);letter-spacing:-.01em}
.blog-article h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--slate);margin:clamp(30px,5vh,48px) 0 14px}
/* h3: uzun yazilarda ikinci seviye. h2'den belirgin sekilde kucuk olmali ki
   hiyerarsi gozle de okunsun — yoksa iki seviye ayni agirlikta gorunur. */
.blog-article h3{font-family:var(--font-heading);font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.25;color:var(--slate);margin:clamp(22px,3.4vh,32px) 0 10px}
.blog-article p{font-family:var(--font-ui);font-size:16.5px;line-height:1.72;color:#3f4448;margin:0 0 18px}
.blog-article ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
/* Madde metni paragrafla AYNI boyutta olsun — yazıdan yazıya boyut farkı kalmasın. */
.blog-article li{font-family:var(--font-ui);font-size:16.5px;line-height:1.66;color:#3f4448;padding-left:24px;position:relative}
.blog-article li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:rgba(176,140,80,.75)}
@media(max-width:640px){.blog-article p,.blog-article li{font-size:16px}}
/* ---- Favori kalbi (blog kartı + yazı) ---- */
.blog-card-img{position:relative}
/* Yazı içindeki büyük hâli: kalp + etiket, akışta duruyor (absolute değil) */
.blog-art-fav{display:flex;align-items:center;gap:10px;margin:0 0 26px;
  font-family:var(--font-ui);font-size:13.5px;color:var(--slate-soft)}
/* ===== Liquid Glass — tüm butonlarda ortak "sıvı cam" görünümü ===== */
.switcher, #landing .introBtn, .choice, .navbtn, .detail .cta, #kayit .cta, .fan-arrow, .yt-close, #preloader .startBtn, .armoni-cta .ac-btn, .kd-cta-btn, .ai-howto, .blog-more, .mc-btn, .bk-btn{
  position:relative; border:0;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(6px) url("#container-glass");
  backdrop-filter:blur(6px) url("#container-glass");
  box-shadow:
    0 0 6px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.05),
    inset 2px 2px .5px -2.5px rgba(0,0,0,.42), inset -2px -2px .5px -2.5px rgba(0,0,0,.38),
    inset 1px 1px 1px -.5px rgba(0,0,0,.28), inset -1px -1px 1px -.5px rgba(0,0,0,.28),
    inset 0 0 5px 5px rgba(0,0,0,.045), inset 0 0 2px 2px rgba(0,0,0,.03),
    0 0 12px rgba(255,255,255,.12);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  /* yazı camın içine oyulmuş/kabartma gibi görünsün (letterpress) */
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.07);
}
#landing .introBtn:hover, .navbtn:hover:not(:disabled), .detail .cta:hover, #kayit .cta:hover, .fan-arrow:hover, .yt-close:hover, #preloader .startBtn:hover, .armoni-cta .ac-btn:hover, .kd-cta-btn:hover, .ai-howto:hover, .blog-more:hover, .mc-btn:hover, .bk-btn:hover{
  transform:scale(1.05); background:rgba(255,255,255,.58); color:var(--ink);
}
/* --- yalnızca statik blog sayfalarına ait sarmalayıcı --- */
html,body{height:auto;overflow:visible}
body{background:var(--base);color:#2b2d2e;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.sy-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px clamp(16px,6vw,64px);max-width:1200px;margin:0 auto}
.sy-logo img{display:block;height:26px;width:auto}
.sy-nav{display:flex;gap:18px;font-family:var(--font-ui);font-size:13px;color:var(--slate-soft)}
.sy-nav a:hover{color:var(--slate)}
.sy-govde{position:relative;z-index:1;padding:clamp(18px,4vh,44px) clamp(16px,6vw,64px) clamp(60px,10vh,110px)}
.sy-alt{position:relative;z-index:2;padding:0 clamp(16px,6vw,64px) 48px;text-align:center;
  font-family:var(--font-ui);font-size:13px;color:var(--slate-soft)}
.sy-alt a{text-decoration:underline;text-underline-offset:3px}
.sy-kk{margin-top:8px;font-size:12px;color:var(--slate-faint)}
.sy-ustyol{max-width:760px;margin:0 auto 18px;font-family:var(--font-ui);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft)}
.sy-ustyol a:hover{color:var(--slate)}
.sy-ilgili{max-width:760px;margin:clamp(40px,7vh,72px) auto 0;border-top:1px solid rgba(60,60,60,.16);padding-top:26px}
.sy-ilgili h2{font-family:var(--font-heading);font-weight:400;font-size:22px;color:var(--slate);margin:0 0 16px}
.sy-ilgili ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sy-ilgili li{padding-left:0}
.sy-ilgili li::before{display:none}
.sy-ilgili a{font-family:var(--font-ui);font-size:15.5px;color:#3f4448;text-decoration:underline;
  text-decoration-color:rgba(63,68,72,.28);text-underline-offset:3px}
.sy-ilgili a:hover{text-decoration-color:currentColor}
.blog-index{max-width:1100px;margin:0 auto}