/* The landing page (34. tur, index.html): the city's night blue and gold (city/palette.css), readable without scripts. */
:root{--night:#15202b;--raised:#1f2d3b;--line:#3a4b5c;--text:#f4f1ea;--muted:#c6ced6;--gold:#ecc27f;--link:#a8d8f3;--primary:#2e6c85;--primary-line:#6aa6bd;--ok:#5fbf8f;--near:#e0b35c;--no:#8a99a8}
*{box-sizing:border-box}
html{background:var(--night);color-scheme:dark}
body{margin:0;background:var(--night);color:var(--text);font:16px/1.6 'Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif}
a{color:var(--link)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:5;padding:8px 12px;border-radius:8px;background:var(--raised)}
:focus-visible{outline:3px solid #f2cd92;outline-offset:2px}
.eyebrow{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.lp-top{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,48px)}
.lp-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font:600 15px Georgia,serif;letter-spacing:.1em;text-decoration:none}
/* 46. tur: the logo (marka/logo-tek-satir.svg, tooling/marka.mjs) in place of the M box and the name. */
.lp-brand img{display:block;height:36px;width:auto}
.lp-top nav{display:flex;align-items:center;gap:6px}
.lp-top nav a{padding:8px 12px;border-radius:9px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;background:#15202b99}
.lp-top nav a:hover{background:#1f2d3bdd}
.lp-top nav .lp-enter{border:1px solid var(--primary-line);background:var(--primary)}
.lp-hero{position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;overflow:hidden}
.lp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.lp-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#15202bf2 0%,#15202bd0 38%,#15202b40 72%,#15202b10 100%),linear-gradient(0deg,var(--night) 0%,#15202b00 30%)}
.lp-hero-text{position:relative;z-index:1;max-width:680px;padding:120px clamp(16px,4vw,48px) 56px}
.lp-hero h1{margin:14px 0 16px;font:500 clamp(34px,5.2vw,58px)/1.08 Georgia,serif;letter-spacing:-.01em}
.lp-lead{margin:0 0 24px;max-width:560px;font-size:18px;color:#dde3e8}
.lp-actions{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0}
.lp-primary{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:12px;background:var(--gold);color:#1b1407;font-weight:800;font-size:16px;text-decoration:none}
.lp-primary:hover{background:#f2cd92}
.lp-secondary{display:inline-flex;align-items:center;min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:#15202bcc;color:var(--text);font-weight:600;text-decoration:none}
.lp-secondary:hover{border-color:var(--gold)}
/* 42. tur: under the two buttons, what the free account gives; above them, the way back for one who has studied here. */
.lp-free{margin:12px 0 0;font-size:14px;color:#cfd7de}
.lp-back{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--gold);border-radius:8px;background:#15202bcc;font-size:15px;color:var(--text)}
.lp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,48px);list-style:none}
.lp-stats li{padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--raised);text-align:center;color:var(--muted);font-size:14px}
.lp-stats b{display:block;font:600 30px/1.2 Georgia,serif;color:var(--text)}
.lp-section{max-width:1080px;margin:0 auto;padding:56px clamp(16px,4vw,48px) 0}
.lp-section h2{margin:0 0 18px;font:500 clamp(26px,3.2vw,34px)/1.2 Georgia,serif}
.lp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lp-card{display:block;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--raised);color:var(--text);text-decoration:none}
.lp-card:hover{border-color:var(--gold)}
.lp-card h3{margin:0 0 6px;font:600 18px/1.3 Georgia,serif;color:var(--gold)}
.lp-card p{margin:0;font-size:14.5px;color:var(--muted)}
.lp-report{max-width:1080px}
.lp-report p{margin:0 0 12px;max-width:760px;color:#dde3e8}
.lp-report .lp-report-line b{color:var(--text)}
.lp-bar{display:flex;height:14px;max-width:760px;margin:6px 0 16px;border-radius:8px;overflow:hidden;background:var(--line)}
.lp-bar i{display:block;height:100%}.lp-bar .var{background:var(--ok)}.lp-bar .yakin{background:var(--near)}.lp-bar .yok{background:var(--no)}
.lp-comments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px;padding:0;list-style:none}
.lp-comments>li{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--raised)}
.lp-comments blockquote{margin:0 0 8px;font-size:15px}.lp-comments p{margin:0}.lp-comments small,.lp-comments .quiet{color:var(--muted);font-size:13px}
.sss-item{padding:18px 0;border-top:1px solid var(--line)}
.sss-item h3{margin:0 0 6px;font:600 19px/1.35 Georgia,serif}
.sss-answer p{margin:0;max-width:820px;color:#dde3e8}
.sss-source{margin:8px 0 0;font-size:13px;color:var(--muted)}
.lp-foot{max-width:1080px;margin:56px auto 0;padding:24px clamp(16px,4vw,48px) calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px}.lp-foot nav a{font-weight:600;text-decoration:none}
.lp-foot p{margin:6px 0}
/* 61. tur: the payment institution's band (iyzico ile Öde and the card schemes), from iyzico's logo pack, unchanged. */
.lp-foot .lp-pay{margin:4px 0 14px}.lp-pay img{display:block;width:100%;max-width:456px;height:auto}
@media(max-width:900px){.lp-cards,.lp-comments{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
 /* 38. tur: on a phone the header keeps Paketler and Giriş yap; “Şehre gir” is the big button right under the picture. */
 .lp-top nav a:not(.lp-pack):not(.lp-login){display:none}
 .lp-top{gap:8px}.lp-top nav{gap:4px}.lp-top nav a{padding:8px 10px;font-size:13px}
 .lp-hero{min-height:auto;display:block}
 .lp-hero-img{position:relative;height:auto;aspect-ratio:16/10;object-position:58% 40%}
 .lp-hero::after{background:linear-gradient(0deg,var(--night) 0%,#15202b00 22%)}
 .lp-hero-text{padding:18px 16px 28px}
 .lp-lead{font-size:16.5px}
 .lp-actions a{width:100%;justify-content:center}
 .lp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lp-cards,.lp-comments{grid-template-columns:1fr}
 .lp-section{padding-top:40px}
}
@media(prefers-reduced-motion:no-preference){.lp-card,.lp-primary,.lp-secondary{transition:background .15s,border-color .15s}}
/* The numbers in the colours of the bar under them. */
.lp-report [data-report=var]{color:var(--ok)}.lp-report [data-report=yakin]{color:var(--near)}.lp-report [data-report=yok]{color:#aebccb}
@media(max-width:650px){.lp-top{background:linear-gradient(180deg,#15202bf0 0%,#15202b99 70%,#15202b00 100%)}.lp-brand{text-shadow:0 1px 6px #000c}}
/* 38. tur: Paketler stands out a little among the header's links. */
.lp-top nav .lp-pack{border:1px solid var(--gold)}
@media(max-width:380px){.lp-brand{letter-spacing:.04em;font-size:13px}.lp-brand img{height:32px}}
/* 40. tur: the comments under the opening (giris.js), the card's lines as on the Yorumlar page. With six or more a slow
   sideways loop that stops under the pointer, on focus and with the button, and stands still when motion is turned off. */
.lp-voices{padding-top:40px}
.lp-voices-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.lp-voices-head h2{margin:0}
.lp-voices-pause{flex:none;min-height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:600 13px/1 system-ui,sans-serif;cursor:pointer}
.lp-voices-pause[hidden]{display:none}
.lp-comments>li{display:flex;flex-direction:column;gap:8px}
.lp-comments blockquote p{font:400 15.5px/1.55 Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.lp-comments blockquote p::before{content:'“';color:var(--gold)}.lp-comments blockquote p::after{content:'”';color:var(--gold)}
.lp-comments .comment-who{margin-top:auto;color:var(--muted);font-size:13px}.lp-comments .comment-who strong{color:var(--text)}
.lp-comments .comment-basis{color:var(--gold);font-size:12px}
.lp-comments .comment-stars{margin:0;font-size:18px;line-height:1;letter-spacing:2px}.lp-comments .comment-stars .on{color:#fbbc04}.lp-comments .comment-stars .off{color:#55677a}
.lp-voices.moving .lp-voices-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lp-voices.moving .lp-comments{display:flex;width:max-content;animation:lp-loop var(--loop,60s) linear infinite}
.lp-voices.moving .lp-comments>li{flex:none;width:min(340px,78vw)}
.lp-voices.moving blockquote p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.lp-voices.moving:hover .lp-comments,.lp-voices.moving:focus-within .lp-comments,.lp-voices.paused .lp-comments{animation-play-state:paused}
@keyframes lp-loop{to{transform:translateX(calc(-50% - 6px))}}
@media(prefers-reduced-motion:reduce){.lp-voices.moving .lp-comments{animation:none}.lp-voices .lp-copy,.lp-voices-pause{display:none!important}.lp-voices.moving .lp-voices-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}