/* aklıma geldin · rehber sayfaları. Renk ve yazı tipleri index.html ile aynı (Flaşlı gece). */
:root{
  --gece:#150d12; --gece-2:#20141b; --gece-3:#3a2531; --metin:#fbeef4; --soluk:#c9b0be;
  --turuncu:#ff5c9d; --turuncu-2:#ff85b6; --baski:#f6f0f2; --baski-yazi:#2a1620;
  --bant-yazi:#43112a; --golge:rgba(0,0,0,.85); --damga-renk:#ff9a3c;
  --baslik:"Bricolage Grotesque",system-ui,sans-serif; --govde:"Figtree",system-ui,sans-serif; --el:"Caveat","Segoe Print",cursive; --damga:"VT323",ui-monospace,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --gece:#fff3f8; --gece-2:#ffffff; --gece-3:#f1d2e0; --metin:#2b1220; --soluk:#6e4c5f;
  --turuncu:#c01462; --turuncu-2:#a30f52; --bant-yazi:#ffe1ee; --golge:rgba(110,20,60,.32);
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --gece:#fff3f8; --gece-2:#ffffff; --gece-3:#f1d2e0; --metin:#2b1220; --soluk:#6e4c5f;
  --turuncu:#c01462; --turuncu-2:#a30f52; --bant-yazi:#ffe1ee; --golge:rgba(110,20,60,.32);
  color-scheme:light;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--gece);color:var(--metin);font:400 17px/1.65 var(--govde);-webkit-font-smoothing:antialiased;accent-color:var(--turuncu)}
::selection{background:var(--turuncu);color:var(--gece)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--turuncu);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
h1,h2,h3{font-family:var(--baslik);font-weight:800;margin:0;letter-spacing:-.04em;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--turuncu)}
p{margin:0}
.ok{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--gece) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--gece-3)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:800 1.55rem/1 var(--baslik);letter-spacing:-.03em;text-decoration:none}
.logo img{display:block}.logo .logo-acik,:root[data-theme="light"] .logo .logo-koyu{display:none}:root[data-theme="light"] .logo .logo-acik{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .logo .logo-koyu{display:none}:root:not([data-theme="dark"]) .logo .logo-acik{display:block}}
.logo span{color:var(--turuncu);margin-left:-10px}
.links{display:flex;align-items:center;gap:24px;font-size:.95rem}
.links a:not(.btn){text-decoration:none;color:var(--soluk)}
.links a:not(.btn):hover{color:var(--metin)}
@media (max-width:760px){.links a:not(.btn){display:none}}
@media (max-width:420px){.logo{font-size:1.3rem;gap:8px}.logo img{width:28px;height:28px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:14px;border:0;background:var(--turuncu);color:var(--gece)!important;font:800 1rem var(--govde);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s}
.btn:hover{background:var(--turuncu-2);transform:translateY(-1px)}
.btn.sm{min-height:44px;padding:0 18px;border-radius:999px}
.btn.lg{min-height:58px;font-size:1.1rem}

/* baskılar */
.baski{position:relative;margin:0;background:#1a1015;border:10px solid var(--baski);border-bottom-width:42px;box-shadow:0 26px 44px -22px var(--golge),0 2px 6px rgba(0,0,0,.2)}
.baski img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.28) saturate(1.22) brightness(1.06)}
.baski::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,0,0,.5) 100%);pointer-events:none}
.tarih{position:absolute;right:12px;bottom:8px;z-index:2;font:400 1.5rem/1 var(--damga);color:var(--damga-renk);letter-spacing:.06em;text-shadow:0 0 2px #ff6a00,0 0 9px rgba(255,110,20,.85),0 1px 1px #000}
.baski figcaption{position:absolute;left:0;right:0;bottom:-40px;padding:4px 4px 0;background:var(--baski);font:700 1.35rem/1.1 var(--el);color:var(--baski-yazi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* yazı başı */
.bas{padding-block:56px 72px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:center}
.yol{font-size:.9rem;color:var(--soluk);margin-bottom:22px}
.yol a{text-decoration:none}.yol a:hover{color:var(--metin)}
.bas h1{font-size:clamp(3rem,6.6vw,6rem);line-height:.88;max-width:13ch}
.bas .ozet{margin-top:26px;font-size:1.18rem;color:var(--soluk);max-width:48ch}
.bas .baski{height:440px;transform:rotate(3deg)}
@media (max-width:900px){.bas{grid-template-columns:1fr;gap:40px;padding-top:36px}.bas .baski{height:300px;width:min(300px,80%);justify-self:center}}

/* gövde */
.metin{max-width:720px;margin:0 auto;padding-bottom:40px}
.metin section{padding-block:56px;border-top:1px solid var(--gece-3)}
.metin h2{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:.92;margin-bottom:22px}
.metin h3{font-size:1.7rem;line-height:1;letter-spacing:-.03em;margin:36px 0 12px}
.metin p+p{margin-top:14px}
.metin .giris{font-size:1.12rem}
.metin ul,.metin ol{margin:14px 0 0;padding-left:1.25em;display:flex;flex-direction:column;gap:10px}
.metin li::marker{color:var(--turuncu);font-weight:800}
.metin b{font-weight:700}
.not{display:block;margin-top:14px;font:700 1.45rem/1.15 var(--el);color:var(--turuncu);transform:rotate(-1.2deg);transform-origin:left}
.adimlar{counter-reset:a;list-style:none;padding:0!important}
.adimlar li{counter-increment:a;position:relative;padding-left:58px;min-height:44px}
.adimlar li::before{content:counter(a,decimal-leading-zero);position:absolute;left:0;top:-2px;font:400 1.9rem/1 var(--damga);color:var(--damga-renk);text-shadow:0 0 2px #ff6a00,0 0 9px rgba(255,110,20,.6)}
.ara-baski{display:flex;gap:28px;justify-content:center;margin:40px 0 8px}
.ara-baski .baski{width:240px;height:260px}
.ara-baski .baski:nth-child(1){transform:rotate(-4deg)}.ara-baski .baski:nth-child(2){transform:rotate(3deg);margin-top:26px}
@media (max-width:560px){.ara-baski{gap:14px}.ara-baski .baski{height:190px;border-width:6px;border-bottom-width:32px}.ara-baski .baski figcaption{bottom:-30px;font-size:1.1rem}}

/* sss */
.sss details{border-bottom:1px solid var(--gece-3);padding:18px 0}
.sss summary{cursor:pointer;list-style:none;font:700 1.12rem/1.35 var(--govde);display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";color:var(--turuncu);font:800 1.6rem/1 var(--baslik);transition:transform .2s}
.sss details[open] summary::after{transform:rotate(45deg)}
.sss details p{margin-top:8px;color:var(--soluk);max-width:65ch}

/* pembe bant */
.bant{background:var(--turuncu);color:var(--gece);padding-block:80px 90px;margin-top:40px}
.bant .wrap{max-width:860px}
.bant h2{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9}
.bant h2 em{color:var(--gece);font-style:normal;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.bant p{margin-top:20px;font-size:1.15rem;max-width:52ch;color:var(--bant-yazi)}
.bant .btn{margin-top:30px;background:var(--gece);color:var(--metin)!important}
.bant .btn:hover{background:var(--gece-2)}
.bant .el{display:block;margin-top:22px;font:700 1.6rem/1 var(--el);transform:rotate(-1.5deg);transform-origin:left}

/* diğer rehberler */
.diger{padding-block:72px}
.diger h2{font-size:clamp(2rem,4vw,3rem);line-height:.92;margin-bottom:30px}
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px 28px}
.kart{text-decoration:none;display:flex;flex-direction:column;gap:56px}
.kart .baski{height:220px;transition:transform .2s}
.kart:nth-child(odd) .baski{transform:rotate(-2deg)}.kart:nth-child(even) .baski{transform:rotate(2deg)}
.kart:hover .baski{transform:rotate(0) translateY(-4px)}
.kart b{font:800 1.5rem/1 var(--baslik);letter-spacing:-.03em}
.kart span{display:block;margin-top:8px;color:var(--soluk);font-size:.95rem}

footer{padding-block:36px 60px;border-top:1px solid var(--gece-3);color:var(--soluk);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--metin)}
.kucuk{font-size:.86rem;color:var(--soluk)}