/* Gizlilik ve koşullar: siyah-beyaz, altın oranlı iki sütun (38,2 : 61,8). Boşluklar Fibonacci: 8 · 13 · 21 · 34 · 55 · 89 */
:root{color-scheme:light}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#fff;color:#000;font-family:Montserrat,system-ui,Arial,sans-serif;font-weight:400}

/* Üst şerit */
.lg-top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:21px;padding:13px 4vw;background:#fff}
.lg-logo{display:inline-flex;align-items:center;gap:14px;color:#000;text-decoration:none}
.lg-logo svg{display:block;width:76px;height:40px}
.lg-logo span{font-weight:300;font-size:15px;line-height:1;letter-spacing:.5em}
.lg-langs{position:relative;display:flex;gap:2px;padding:5px;border:2px solid #000;border-radius:10px}
.lg-langs i{position:absolute;top:5px;bottom:5px;left:0;width:0;background:#000;border-radius:6px;transition:left .3s cubic-bezier(.3,1.4,.5,1),width .3s}
.lg-langs button{position:relative;z-index:1;padding:8px 13px;border:0;border-radius:6px;background:none;color:#000;font:500 13px/1 Montserrat,system-ui,sans-serif;cursor:pointer;transition:color .25s}
.lg-langs button[aria-pressed="true"]{color:#fff}

/* Dil blokları: JS yoksa İngilizce görünür */
.lb{display:none}
html[data-lang="en"] .lb[data-lang="en"],html[data-lang="tr"] .lb[data-lang="tr"],html[data-lang="de"] .lb[data-lang="de"],html[data-lang="fr"] .lb[data-lang="fr"],html[data-lang="it"] .lb[data-lang="it"]{display:grid}
.lb{grid-template-columns:38.2fr 61.8fr;gap:89px;max-width:1240px;margin:0 auto;padding:34px 4vw 89px}

/* Sol sütun */
.lg-rail{position:sticky;top:89px;align-self:start;max-height:calc(100vh - 110px);overflow-y:auto;scrollbar-width:none;animation:lgIn .6s ease both}
.lg-rail::-webkit-scrollbar{display:none}
.lg-app{display:flex;align-items:center;gap:13px}
.lg-ic{position:relative;flex:none;display:block;width:55px;height:55px;border-radius:22.37%;overflow:hidden;background:#fff}
.lg-ic img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lg-ic::after{content:"";position:absolute;inset:0;border:2px solid #000;border-radius:inherit}
.lg-app b{font:500 21px/1 Fredoka,Montserrat,system-ui,sans-serif;letter-spacing:.01em}
.lg-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:21px}
.lg-tabs a{position:relative;display:block;overflow:hidden;isolation:isolate;padding:.8em .6em;border:2px solid #000;border-radius:10px;color:#000;font:500 13px/1 Montserrat,system-ui,sans-serif;text-align:center;text-decoration:none;transition:color .25s}
.lg-tabs a::before{content:"";position:absolute;z-index:-1;inset:0;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.lg-tabs a:hover,.lg-tabs a[aria-current]{color:#fff}
.lg-tabs a:hover::before,.lg-tabs a[aria-current]::before{transform:none}

/* Okuma ilerlemesi: App Store'daki yükleme çubuğunun aynısı, bu kez gerçekten ilerliyor */
.lg-prog{display:flex;align-items:center;gap:13px;margin-top:34px}
.lg-pc{flex:none;min-width:3.2em;font:800 21px/1 Montserrat,system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lg-bar{flex:1;display:block;height:13px;padding:2px;border:2px solid #000;border-radius:10px}
.lg-bar i{display:block;width:100%;height:100%;background:#000;border-radius:5px;transform:scaleX(0);transform-origin:0 50%}

/* İçindekiler: "İlham" noktası hangi bölümdeysen orada durur */
.lg-toc{position:relative;display:block;margin-top:21px;padding-left:21px;list-style:none}
.lg-toc::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:#000;opacity:.2}
.lg-toc a{display:block;padding:6px 0;color:#000;font-size:13px;font-weight:300;line-height:1.382;text-decoration:none;opacity:.62;transition:opacity .2s}
.lg-toc a:hover{opacity:1}
.lg-toc a.on{font-weight:500;opacity:1}
.lg-mark{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#000;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}

/* Metin */
.pl-page{min-width:0}
.pl-page h1{position:relative;font-size:clamp(34px,4.2vw,55px);font-weight:800;line-height:1.1;letter-spacing:-.03em;animation:lgWipe .8s .1s cubic-bezier(.45,0,.2,1) both}
.pl-lead{margin-top:21px;font-size:21px;font-weight:300;line-height:1.382}
.pl-date{margin-top:13px;font-size:13px;font-weight:500}
.pl-page>p:not(.pl-lead):not(.pl-date),.pl-sec p{margin-top:13px;font-size:16px;font-weight:400;line-height:1.618}
.pl-page>.pl-date+p{margin-top:34px}
.pl-sec{margin-top:55px;scroll-margin-top:89px}
.pl-sec h2{font-size:21px;font-weight:800;line-height:1.236;letter-spacing:-.01em}
.pl-page a{color:#000;font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.pl-page a:hover{text-decoration-thickness:2px}
.pl-foot{margin-top:89px;padding-top:21px;border-top:2px solid #000;font-size:13px;line-height:1.618}
.pl-foot a{color:#000;font-weight:500}
.lg-doc{min-width:0;animation:lgIn .6s .1s ease both}

/* Destek: büyük e-posta düğmesi ve açılır sorular */
.pl-mail{margin-top:21px!important}
.pl-page .pl-mail a{position:relative;display:inline-block;overflow:hidden;isolation:isolate;padding:.618em 1em;border:2px solid #000;border-radius:10px;font-size:clamp(18px,2.2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1;text-decoration:none;transition:color .25s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.pl-page .pl-mail a::before{content:"";position:absolute;z-index:-1;inset:0;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.pl-page .pl-mail a:hover{color:#fff}
.pl-page .pl-mail a:hover::before{transform:none}
.pl-page .pl-mail a:active{transform:scale(.96)}
.pl-faq{margin-top:55px}
.pl-faq h2{margin-bottom:21px;font-size:21px;font-weight:800;line-height:1.236;letter-spacing:-.01em}
.pl-faq details{border-top:2px solid #000;scroll-margin-top:89px}
.pl-faq details:last-child{border-bottom:2px solid #000}
.pl-faq summary{display:flex;justify-content:space-between;align-items:center;gap:21px;padding:21px 0;font-size:16px;font-weight:500;line-height:1.382;cursor:pointer;list-style:none}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary::after{content:"";flex:none;width:13px;height:13px;background:linear-gradient(#000,#000) 50% 50%/100% 2px no-repeat,linear-gradient(#000,#000) 50% 50%/2px 100% no-repeat;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.pl-faq details[open] summary::after{transform:rotate(135deg)}
.pl-faq details p{margin:0 0 21px;font-size:16px;line-height:1.618;animation:lgIn .35s ease both}

@keyframes lgIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes lgWipe{from{clip-path:inset(-.2em 100% -.2em -.1em)}to{clip-path:inset(-.2em -.1em -.2em -.1em)}}

/* App Store bağlantıları telefondan da açılır */
@media(max-width:900px){
  .lb{grid-template-columns:1fr;gap:34px;padding-top:21px}
  .lg-rail{position:static;max-height:none;overflow:visible}
  .lg-toc{display:none}
  .lg-prog{margin:0}
  .lg-pc{display:none}
  .lg-bar{position:fixed;left:0;right:0;top:0;z-index:6;height:3px;padding:0;border:0;border-radius:0}
  .lg-bar i{border-radius:0}
  .lg-top{flex-wrap:wrap;padding:13px 16px;gap:13px}
  .lg-langs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .lg-langs{align-self:stretch;width:100%;justify-content:space-between}
  .lg-langs button{padding:8px 7px;font-size:11.5px}
  .lg-tabs a{padding:.8em .2em;font-size:11.5px}
  .lb{padding-left:16px;padding-right:16px}
  .pl-lead{font-size:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lg-rail,.lg-doc,.pl-page h1{animation:none}}
