/* TS SystemLabs — tek stil dosyası. Koyu-öncelikli, hairline + grain + glow, tek aksan.
   Reçete: arastirma/premium-tasarim.md (28 Eyl 2026). Framework yok. */

:root {
  --bg: #0b0c10;
  --bg-2: #111318;
  --surface: #171a21;
  --surface-2: #1e2230;
  --hair: rgba(255, 255, 255, .07);
  --hair-strong: rgba(255, 255, 255, .14);
  --text: #edeef2;
  --text-2: #a6abb8;
  --text-3: #6b7280;
  --accent: #7c8cff;
  --accent-2: #b9c2ff;
  --accent-ink: #0b0c10;
  --ok: #3ddc97;
  --warn: #ffb347;
  --err: #ff5c5c;
  --r-kart: 12px;
  --r-btn: 8px;
  --r-cerceve: 10px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-float: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--hair);
  --glow: radial-gradient(60% 50% at 50% 0%, rgba(124, 140, 255, .18), transparent 70%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --govde: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --kap: 1200px;
  /* eski şablon uyumluluğu */
  --zemin: var(--bg); --kagit: var(--surface); --metin: var(--text); --metin-2: var(--text-2);
  --cizgi: var(--hair); --koyu: var(--bg); --koyu-2: var(--bg-2); --vurgu: var(--accent); --vurgu-acik: var(--accent-2);
  --radius: var(--r-kart); --golge: var(--shadow-card); --baslik: var(--govde);
}

/* ---------- temel ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--govde); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: rgba(124, 140, 255, .35); color: #fff; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: #fff; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.2rem + 4.8vw, 5rem); letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size: .95rem; }
p { margin: 0 0 1em; }
.kap { width: min(var(--kap), 100% - clamp(32px, 8vw, 80px)); margin: 0 auto; }
.dar { max-width: 780px; }
.kucuk { font-size: .9rem; color: var(--text-2); }
.vurgu { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-2); letter-spacing: -.01em; }
.ust-etiket { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); opacity: .85; margin: 0 0 14px; }
.ust-etiket .rozet { margin-left: 10px; vertical-align: middle; }
.bolum-alt { color: var(--text-2); max-width: 58ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin-bottom: 40px; }

/* ---------- üst ---------- */
.ust { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 16, .65); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--hair); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.logo-isaret { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #5b6cff); color: #fff; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: -.02em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(124, 140, 255, .25); }
.logo-ad { color: #fff; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { color: var(--text-2); font-size: .92rem; font-weight: 500; padding: 8px 12px; border-radius: var(--r-btn); transition: color .2s, background .2s; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.menu a.btn-kucuk { margin-left: 10px; color: var(--accent-ink); }
.menu-dugme { display: none; background: none; border: 1px solid var(--hair-strong); color: #fff; border-radius: 8px; font-size: 1.2rem; padding: 2px 10px; cursor: pointer; }

/* ---------- düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-btn); font: 500 .95rem/1 var(--govde); border: 1px solid transparent; cursor: pointer; transition: transform .24s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-ana { background: #fff; color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -12px rgba(124, 140, 255, .6); }
.btn-ana:hover { background: var(--accent-2); color: var(--accent-ink); }
.btn-ikincil { background: rgba(255, 255, 255, .03); color: #fff; border-color: var(--hair-strong); }
.btn-ikincil:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; }
.btn-kucuk { padding: 8px 14px; font-size: .88rem; background: #fff; color: var(--accent-ink); }
.btn-tam { width: 100%; }

/* ---------- rozetler ---------- */
.rozet { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, .03); color: var(--text-2); font: 500 .72rem/1 var(--mono); letter-spacing: .02em; white-space: nowrap; text-transform: none; }
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.rozet-canli { color: var(--ok); }
.rozet-canli::before { box-shadow: 0 0 0 3px rgba(61, 220, 151, .2); animation: nabiz 2.4s ease-in-out infinite; }
.rozet-kurumsal { color: var(--accent-2); }
.rozet-kurumsal::before { box-shadow: 0 0 0 3px rgba(124, 140, 255, .2); }
.rozet-yakinda { color: var(--warn); }
.rozet-yakinda::before { box-shadow: 0 0 0 3px rgba(255, 179, 71, .2); }
.rozet-yeni { color: var(--accent-ink); background: var(--accent-2); border-color: var(--accent-2); }
.rozet-yeni::before { display: none; }
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 3px rgba(61, 220, 151, .2); } 50% { box-shadow: 0 0 0 5px rgba(61, 220, 151, .08); } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(#000 20%, transparent 85%); mask-image: linear-gradient(#000 20%, transparent 85%); opacity: .6; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glow); }
.hero-ic { display: grid; grid-template-columns: 45fr 55fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-metin > * { animation: yuksel .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.hero-alt { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--text-2); max-width: 54ch; }
.hero-alt strong { color: #fff; font-weight: 600; }
.hero-btn { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 40px; }
.hero-kanit { list-style: none; display: flex; gap: clamp(20px, 3vw, 40px); padding: 24px 0 0; margin: 0; border-top: 1px solid var(--hair); color: var(--text-3); font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.hero-kanit strong { display: block; color: #fff; font-family: var(--govde); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; text-transform: none; margin-bottom: 2px; }
.hero-kucuk { padding: clamp(48px, 6vw, 72px) 0 clamp(48px, 6vw, 64px); }
.hero-kucuk .hero-ic { display: block; }
.hero-gorsel { position: relative; animation: yuksel 1s var(--ease) .25s both; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); padding-bottom: 12%; }
.hero-gorsel .ekran { transform: perspective(1400px) rotateX(4deg) rotateY(-7deg); transition: transform .8s var(--ease); }
.hero-gorsel:hover .ekran:not(.ekran-kucuk) { transform: perspective(1400px) rotateX(2deg) rotateY(-4deg); }
.hero-gorsel .ekran-kucuk { position: absolute; right: -2%; bottom: 0; width: 50%; transform: none; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair-strong); }
.hero-gorsel .ekran-kucuk .ekran-bar { height: 22px; }
@keyframes yuksel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- ekran çerçevesi ---------- */
.ekran { position: relative; margin: 0; background: #0d0f14; border: 1px solid var(--hair-strong); border-radius: var(--r-cerceve); overflow: hidden; box-shadow: var(--shadow-float); }
.ekran::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); border-radius: inherit; }
.ekran-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #13161d; border-bottom: 1px solid var(--hair); }
.ekran-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.ekran-bar span:first-child { background: #ff5f57; } .ekran-bar span:nth-child(2) { background: #febc2e; } .ekran-bar span:nth-child(3) { background: #28c840; }
.ekran figcaption { padding: 10px 14px; color: var(--text-2); font-family: var(--mono); font-size: .78rem; border-top: 1px solid var(--hair); }

/* ---------- bölümler ---------- */
.bolum { padding: clamp(64px, 10vw, 128px) 0; position: relative; }
.bolum-koyu { background: var(--bg-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.bolum-koyu h2 { color: #fff; }
.bolum-acik { background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); border-top: 1px solid var(--hair); }
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- kartlar (bento) ---------- */
.kartlar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.kart { --kart-renk: var(--accent); --mx: 50%; --my: 0px; position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 240px; padding: 26px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-kart); color: var(--text); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; transition: transform .24s var(--ease), border-color .24s, background .24s; }
.kart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 140, 255, .12), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.kart::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background-image: var(--grain); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
a.kart:hover { transform: translateY(-2px); border-color: var(--hair-strong); background: var(--surface-2); color: var(--text); }
a.kart:hover::before { opacity: 1; }
.kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.kart-etiket { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kart-etiket::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kart-renk); box-shadow: 0 0 12px var(--kart-renk); }
.kart h3 { margin: 4px 0 2px; }
.kart p { color: var(--text-2); margin: 0; max-width: 46ch; }
.kart-ok { position: relative; z-index: 1; margin-top: auto; padding-top: 14px; color: var(--accent-2); font-size: .9rem; font-weight: 500; transition: transform .24s var(--ease); }
a.kart:hover .kart-ok { transform: translateX(4px); }
.kart-ekran { position: absolute; z-index: 0; right: -8%; bottom: -12%; width: 62%; border-radius: 8px 0 0 0; overflow: hidden; border: 1px solid var(--hair-strong); box-shadow: -20px -10px 60px -20px rgba(0, 0, 0, .8); transition: transform .5s var(--ease); pointer-events: none; }
.kart-ekran img { width: 100%; }
a.kart:hover .kart-ekran { transform: translate(-4%, -4%); }
.kart-genis { grid-column: span 8; grid-row: span 2; min-height: 420px; }
.kart-genis .kart-ekran { width: 58%; bottom: -4%; right: -3%; }
.kart-genis p { max-width: 38ch; }
.kart-orta { grid-column: span 4; grid-row: span 2; padding-bottom: 160px; }
.kart-orta .kart-ekran { width: 96%; right: -18%; bottom: -8%; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); }
.kart-dar { grid-column: span 3; min-height: 380px; padding-bottom: 128px; }
.kart-dar .kart-ekran { width: 84%; right: -12%; bottom: -6%; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.kart-dar .kart-ok { margin-top: auto; }
.kart-dar p { font-size: .92rem; }
.kart-duz { grid-column: span 4; min-height: 0; }
.kart-duz .ozellik-liste { margin-top: 8px; }
.sayi-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hair); }
.sayi-serit li { list-style: none; }
.sayi-serit strong { display: block; font-size: clamp(1.8rem, 1rem + 1.8vw, 2.6rem); font-weight: 600; letter-spacing: -.04em; color: #fff; line-height: 1; margin-bottom: 8px; }
.sayi-serit span { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* ---------- otel modül listesi ---------- */
.modul-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.modul-liste li { background: rgba(255, 255, 255, .025); border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px; transition: border-color .2s, background .2s; }
.modul-liste li:hover { border-color: var(--hair-strong); background: rgba(255, 255, 255, .04); }
.modul-liste strong { color: #fff; font-weight: 600; font-size: .95rem; }
.modul-liste span { color: var(--text-2); font-size: .88rem; }

/* ---------- hizmetler, ilkeler, süreç ---------- */
.hizmetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.hizmet { padding: 28px 24px 28px 0; border-right: 1px solid var(--hair); margin-right: 24px; }
.hizmet:last-child { border-right: 0; margin-right: 0; }
.hizmet h3 { font-size: 1.05rem; }
.hizmet p { color: var(--text-2); font-size: .95rem; margin: 0; }
.ilkeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ilke { --mx: 50%; --my: 0px; position: relative; isolation: isolate; padding: 28px 24px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-kart); box-shadow: var(--shadow-card); overflow: hidden; }
.ilke::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background-image: var(--grain); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
.ilke::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(124, 140, 255, .1), transparent 60%); opacity: 0; transition: opacity .3s; }
.ilke:hover::before { opacity: 1; }
.ilke .ilke-no { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--accent-2); margin-bottom: 14px; }
.ilke h3 { font-size: 1.1rem; }
.ilke p { color: var(--text-2); font-size: .95rem; margin: 0; }
.surec { counter-reset: s; list-style: none; padding: 0; margin: 40px 0 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.surec li { counter-increment: s; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: .9rem; color: var(--text-2); background: rgba(255, 255, 255, .02); }
.surec li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--accent-2); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-strong); }
.fiyat-notu { color: var(--text-2); max-width: 70ch; font-size: .95rem; }
.fiyat-notu strong { color: #fff; }
.akis { counter-reset: a; list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.akis li { counter-increment: a; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-kart); padding: 22px 20px; box-shadow: var(--shadow-card); }
.akis li::before { content: "0" counter(a); display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--accent-2); margin-bottom: 10px; }
.akis strong { display: block; color: #fff; margin-bottom: 6px; }
.akis span { color: var(--text-2); font-size: .92rem; }
.adimlar { counter-reset: adim; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.adimlar li { position: relative; padding: 20px 20px 20px 62px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-kart); }
.adimlar li::before { counter-increment: adim; content: counter(adim); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair-strong); color: var(--accent-2); display: grid; place-items: center; font-family: var(--mono); font-size: .78rem; }

/* ---------- listeler, galeri, kutu ---------- */
.ozellik-liste { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.ozellik-liste li { padding-left: 26px; position: relative; color: var(--text-2); }
.ozellik-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.galeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.galeri-genis { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
.kutu { --mx: 50%; --my: 0px; position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-kart); padding: 28px; box-shadow: var(--shadow-card); overflow: hidden; }
.kutu::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background-image: var(--grain); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
.kutu h3 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 6px; }
.kutu h3:first-child { margin-top: 0; }
.kutu p { color: var(--text-2); }
.kutu p strong { color: #fff; }
.kutu .btn { margin-top: 12px; }
.metin-govde { max-width: 62ch; font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem); }
.metin-govde p { color: var(--text-2); }
.metin-govde p strong { color: #fff; }

/* ---------- form ---------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: .92rem; color: var(--text-2); }
.form input, .form select, .form textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--hair-strong); border-radius: var(--r-btn); background: rgba(255, 255, 255, .03); color: #fff; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 140, 255, .2); }
.form select option { background: var(--surface); }
.gizli { position: absolute; left: -9999px; }
.uyari { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-btn); font-weight: 500; border: 1px solid; }
.uyari-ok { background: rgba(61, 220, 151, .1); color: var(--ok); border-color: rgba(61, 220, 151, .3); }
.uyari-hata { background: rgba(255, 92, 92, .1); color: var(--err); border-color: rgba(255, 92, 92, .3); }
.bulten { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.bulten input[type=email] { flex: 1 1 220px; font: inherit; font-size: .92rem; padding: 10px 14px; border-radius: var(--r-btn); border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, .03); color: #fff; }
.bulten input::placeholder { color: var(--text-3); }
.bulten input:focus { outline: none; border-color: var(--accent); }
.bulten .btn { padding: 10px 16px; font-size: .9rem; }

/* ---------- güncellemeler ---------- */
.son-satir { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.son-satir h2 { margin: 0; }
.son-satir > a { font-family: var(--mono); font-size: .82rem; }
.gunluk { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.gunluk li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.gunluk time { color: var(--text-3); font-family: var(--mono); font-size: .8rem; padding-top: 4px; }
.gunluk h3 { margin: 8px 0 4px; font-size: 1.08rem; }
.gunluk p { color: var(--text-2); margin: 0; font-size: .95rem; }
.gunluk .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gunluk .meta a { font-family: var(--mono); font-size: .8rem; }
.gunluk-kisa li { grid-template-columns: 100px 1fr; padding: 18px 0; }

/* ---------- SSS ---------- */
.sss { border-bottom: 1px solid var(--hair); padding: 4px 0; }
.sss summary { cursor: pointer; font-weight: 500; color: #fff; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-family: var(--mono); color: var(--text-3); font-size: 1.1rem; transition: transform .3s var(--ease), color .2s; }
.sss[open] summary::after { transform: rotate(45deg); color: var(--accent-2); }
.sss p { color: var(--text-2); margin: 0 0 16px; max-width: 70ch; }

/* ---------- CTA ---------- */
.cta { padding: clamp(48px, 8vw, 96px) 0; }
.cta-ic { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(32px, 5vw, 56px); border: 1px solid var(--hair-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.cta-ic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 50%, rgba(124, 140, 255, .22), transparent 60%); }
.cta-ic::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background-image: var(--grain); opacity: .3; mix-blend-mode: overlay; }
.cta h2 { margin: 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); }

/* ---------- alt ---------- */
.alt { background: var(--bg-2); border-top: 1px solid var(--hair); color: var(--text-2); padding: 64px 0 24px; }
.alt-ic { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.alt h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.alt a { display: block; color: var(--text-2); font-size: .92rem; margin-bottom: 8px; }
.alt a:hover { color: #fff; }
.alt a.logo { display: inline-flex; margin-bottom: 12px; }
.logo-alt { color: #fff; }
.alt p.kucuk { max-width: 34ch; }
.kunye { font-size: .82rem; line-height: 1.7; }
.telif { border-top: 1px solid var(--hair); margin-top: 40px; padding-top: 18px; color: var(--text-3); font-family: var(--mono); font-size: .76rem; }

/* ---------- duyarlılık ---------- */
@media (max-width: 1024px) {
  .kartlar { grid-template-columns: repeat(6, 1fr); }
  .kart-genis, .kart-orta { grid-column: span 6; grid-row: auto; min-height: 340px; }
  .kart-dar, .kart-duz { grid-column: span 3; }
  .ilkeler { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .hero-ic, .iki-kolon { grid-template-columns: 1fr; }
  .hero-gorsel .ekran { transform: none; }
  .hero-gorsel { padding-bottom: 10%; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(11, 12, 16, .96); padding: 12px 16px 16px; border-bottom: 1px solid var(--hair); gap: 4px; }
  .menu.acik { display: flex; }
  .menu a.btn-kucuk { margin: 8px 0 0; }
  .menu-dugme { display: block; }
  .hizmetler { grid-template-columns: 1fr 1fr; }
  .hizmet { border-right: 0; margin-right: 0; padding: 20px 0; border-bottom: 1px solid var(--hair); }
}
@media (max-width: 600px) {
  .kartlar { grid-template-columns: 1fr; }
  .kart-genis, .kart-orta, .kart-dar, .kart-duz { grid-column: auto; min-height: 0; padding-bottom: 26px; }
  .kart-ekran, .hero-gorsel .ekran-kucuk { display: none; }
  .ilkeler, .hizmetler, .alt-ic { grid-template-columns: 1fr; }
  .gunluk li, .gunluk-kisa li { grid-template-columns: 1fr; gap: 4px; }
  .hero-kanit { flex-wrap: wrap; gap: 16px 24px; }
  .cta-ic { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ================= 28 Eyl 2026 · "M kokpiti" katmanı: karbon doku, metalik çizgi, kontak açılışı, elektronik geçişler ================= */
:root {
  --metal: linear-gradient(90deg, transparent 0%, rgba(214, 219, 228, .12) 20%, rgba(232, 236, 242, .85) 50%, rgba(214, 219, 228, .12) 80%, transparent 100%);
  --metal-dik: linear-gradient(180deg, rgba(232, 236, 242, .55), rgba(255, 255, 255, .07) 28%, rgba(255, 255, 255, .06) 100%);
  --karbon:
    linear-gradient(27deg, #0e1014 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #0e1014 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #171a20 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #171a20 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #12151a 10px, transparent 10px),
    linear-gradient(#14171c 25%, #111318 25%, #111318 50%, transparent 50%, transparent 75%, #181b21 75%, #181b21);
}

/* karbon fiber zemin: hero sağ alt, CTA ve footer'da, maskeli ve sessiz */
.karbon { position: relative; }
.karbon::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--karbon); background-color: #0d0f13; background-size: 20px 20px; opacity: .55; pointer-events: none; }
.hero.karbon::before { -webkit-mask-image: radial-gradient(70% 80% at 85% 70%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 80% at 85% 70%, #000 0%, transparent 70%); opacity: .5; }
.alt.karbon::before { z-index: 0; opacity: .35; -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.alt.karbon > * { position: relative; z-index: 1; }

/* metalik çizgiler: bölüm ayırıcı, hero kanıt üst çizgisi, eyebrow tire */
.bolum-koyu, .bolum-acik, .alt { border-top: 1px solid transparent; border-image: var(--metal) 1; }
.bolum-koyu { border-bottom: 1px solid transparent; }
.hero-kanit { border-top: 1px solid transparent; border-image: var(--metal) 1; }
.ust-etiket::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: 10px; background: linear-gradient(90deg, rgba(232, 236, 242, .9), rgba(232, 236, 242, .15)); }
.hero .ust-etiket::before { box-shadow: 0 0 8px rgba(232, 236, 242, .5); }

/* kart / kutu üst kenarında metalik rim (padding-box / border-box hilesi) */
.kart, .ilke, .kutu, .cta-ic, .akis li, .modul-liste li { border-color: transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--metal-dik); background-origin: border-box; background-clip: padding-box, border-box; }
.modul-liste li { background-image: linear-gradient(rgba(23, 26, 33, .9), rgba(23, 26, 33, .9)), var(--metal-dik); }
a.kart:hover { background-image: linear-gradient(var(--surface-2), var(--surface-2)), linear-gradient(180deg, rgba(185, 194, 255, .8), rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1)); }
.cta-ic { background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(180deg, rgba(232, 236, 242, .7), rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .08)); }

/* elektronik geçişler: düğmede ışık kayması, menüde çizgi çizilmesi */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(130%); }
.btn-ikincil::after { background: linear-gradient(110deg, transparent 35%, rgba(185, 194, 255, .35) 50%, transparent 65%); }
.menu a:not(.btn) { position: relative; }
.menu a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.menu a:not(.btn):hover::after { transform: scaleX(1); }
.ekran::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%); transform: translateX(-130%); transition: transform 1s var(--ease); pointer-events: none; }
.hero-gorsel:hover .ekran::before { transform: translateX(130%); }

/* KONTAK: oturumda bir kez (html.acilis) — ışık süpürmesi, ekranlar güç alır, rozet yanar, rakamlar sayar (JS) */
html.acilis .hero::after { animation: glow-ac 1.6s var(--ease) both; }
html.acilis .hero .tarama { position: absolute; top: 0; bottom: 0; width: 18vw; left: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(232, 236, 242, .12) 45%, rgba(185, 194, 255, .28) 50%, rgba(232, 236, 242, .12) 55%, transparent); animation: tarama 1.4s cubic-bezier(.6, 0, .2, 1) .15s both; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
html.acilis .hero-gorsel .ekran { animation: guc-al 1.3s var(--ease) .5s both; }
html.acilis .hero-gorsel .ekran-kucuk { animation-delay: .9s; }
html.acilis .hero .rozet, html.acilis .hero .ust-etiket { animation: yan 1.1s steps(1, end) .3s both; }
html.acilis .hero-kanit strong { font-variant-numeric: tabular-nums; }
html.acilis .hero-metin > * { animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
@keyframes tarama { from { transform: translateX(-20vw); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(110vw); opacity: 0; } }
@keyframes glow-ac { from { opacity: 0; } 60% { opacity: .35; } to { opacity: 1; } }
@keyframes guc-al { 0% { opacity: 0; filter: brightness(0) saturate(0); } 35% { opacity: 1; filter: brightness(.25) saturate(.2); } 50% { filter: brightness(1.35) saturate(1.1); } 62% { filter: brightness(.7); } 100% { opacity: 1; filter: brightness(1); } }
@keyframes yan { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: .25; } 55% { opacity: 1; } 70% { opacity: .6; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .ekran::before, .hero .tarama { display: none; }
}


/* ================= 28 Eyl 2026 · FÜTÜRİSTİK KATMAN: renk katmanları (aurora), HUD, canlı akış, paralaks/eğim, dönen renkli çerçeve ================= */
:root {
  --c1: #7c8cff; /* indigo */
  --c2: #3fd8ff; /* siyan */
  --c3: #c084fc; /* menekşe */
  --c4: #ffb347; /* kehribar */
  --c5: #ff7aa2; /* gül */
  --c6: #3ddc97; /* nane */
}
@property --aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* aurora: hero'da üç renkli, yavaş hareket eden bulanık katman */
.aurora { position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; transform: translate3d(calc(var(--px, 0) * var(--k, 1) * 1px), calc(var(--py, 0) * var(--k, 1) * 1px), 0); }
.aurora i:nth-child(1) { --k: .6; width: 46vw; height: 46vw; left: 38%; top: -22%; background: radial-gradient(circle at 40% 40%, var(--c1), transparent 62%); animation: aurora1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { --k: -.9; width: 36vw; height: 36vw; left: 62%; top: 10%; background: radial-gradient(circle at 50% 50%, var(--c2), transparent 62%); animation: aurora2 22s ease-in-out infinite alternate; opacity: .4; }
.aurora i:nth-child(3) { --k: 1.3; width: 40vw; height: 40vw; left: -8%; top: 30%; background: radial-gradient(circle at 50% 50%, var(--c3), transparent 62%); animation: aurora3 26s ease-in-out infinite alternate; opacity: .35; }
@keyframes aurora1 { to { translate: 6vw 8vh; scale: 1.15; } }
@keyframes aurora2 { to { translate: -8vw 6vh; scale: .9; } }
@keyframes aurora3 { to { translate: 10vw -6vh; scale: 1.2; } }
.hero::after { opacity: .5; }

/* imleç ızgara ışığı: hero ızgarası fare yakınında parlar */
.izgara-isik { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(232, 236, 242, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 236, 242, .16) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%); mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%); }

/* hero katmanları imleçle paralaks */
.hero-gorsel .ekran { transform: perspective(1400px) rotateX(calc(4deg - var(--py, 0) * .012deg)) rotateY(calc(-7deg + var(--px, 0) * .015deg)) translate3d(calc(var(--px, 0) * .08px), calc(var(--py, 0) * .08px), 0); transition: transform .35s var(--ease); }
.hero-gorsel .ekran-kucuk { transform: translate3d(calc(var(--px, 0) * .16px), calc(var(--py, 0) * .16px), 0); transition: transform .35s var(--ease); }
.hero-gorsel:hover .ekran:not(.ekran-kucuk) { transform: perspective(1400px) rotateX(2deg) rotateY(-4deg) translate3d(calc(var(--px, 0) * .08px), calc(var(--py, 0) * .08px), 0); }

/* gradyan canlı vurgu kelimesi */
.vurgu { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: akan-renk 9s linear infinite; }
@keyframes akan-renk { to { background-position: 300% 0; } }

/* canlı durum satırı + akış şeridi (marquee) */
.durum-satiri { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px 6px 8px; border: 1px solid var(--hair-strong); border-radius: 999px; background: rgba(255, 255, 255, .03); font: 500 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--text-2); backdrop-filter: blur(8px); }
.durum-satiri b { width: 7px; height: 7px; border-radius: 50%; background: var(--c6); box-shadow: 0 0 0 3px rgba(61, 220, 151, .2), 0 0 12px var(--c6); animation: nabiz 2.4s ease-in-out infinite; }
.durum-satiri span + span::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.akis-serit { position: relative; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: var(--metal) 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.akis-serit ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; width: max-content; animation: kaydir 48s linear infinite; }
.akis-serit:hover ul { animation-play-state: paused; }
.akis-serit li { display: inline-flex; align-items: center; gap: 12px; padding: 12px 28px; font: 500 .76rem/1 var(--mono); letter-spacing: .03em; color: var(--text-2); white-space: nowrap; border-right: 1px solid var(--hair); }
.akis-serit li time { color: var(--text-3); }
.akis-serit li em { font-style: normal; color: var(--c2); }
.akis-serit li a { color: #fff; }
@keyframes kaydir { to { transform: translateX(-50%); } }

/* bölüm renk tonları: her bölümün kendi ışıması */
.bolum[data-ton]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; }
.bolum[data-ton="siyan"]::before { background: radial-gradient(50% 60% at 0% 50%, rgba(63, 216, 255, .13), transparent 70%); }
.bolum[data-ton="kehribar"]::before { background: radial-gradient(45% 55% at 100% 0%, rgba(255, 179, 71, .10), transparent 70%); }
.bolum[data-ton="menekse"]::before { background: radial-gradient(60% 60% at 50% 100%, rgba(192, 132, 252, .12), transparent 70%); }
.bolum[data-ton="indigo"]::before { background: radial-gradient(50% 60% at 100% 50%, rgba(124, 140, 255, .12), transparent 70%); }
.bolum { isolation: isolate; }

/* kartlar: 3D eğim + ürün rengiyle ışıma + HUD köşeleri */
.kart { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d; transition: transform .25s var(--ease), border-color .24s, background .24s, box-shadow .3s; }
a.kart:hover { --ty: -3px; box-shadow: var(--shadow-card), 0 24px 60px -30px color-mix(in srgb, var(--kart-renk) 55%, transparent); }
.kart::before { background: radial-gradient(460px circle at var(--mx) var(--my), color-mix(in srgb, var(--kart-renk) 20%, transparent), transparent 60%); }
.hud { position: absolute; inset: 10px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 1;
  background:
    linear-gradient(var(--kart-renk), var(--kart-renk)) left top / 14px 1px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) left top / 1px 14px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) right top / 14px 1px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) right top / 1px 14px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--kart-renk), var(--kart-renk)) right bottom / 1px 14px no-repeat; }
a.kart:hover .hud { opacity: .9; }
.hud::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--kart-renk), transparent); opacity: .7; animation: tarayici 2.6s ease-in-out infinite; }
@keyframes tarayici { 0% { top: 0; opacity: 0; } 10% { opacity: .7; } 90% { opacity: .7; } 100% { top: 100%; opacity: 0; } }
.kart-etiket::before { box-shadow: 0 0 12px var(--kart-renk), 0 0 24px color-mix(in srgb, var(--kart-renk) 50%, transparent); }
.rozet-canli { color: var(--c6); }

/* ilkeler: dört farklı renk */
.ilke:nth-child(1) { --ilke-renk: var(--c1); } .ilke:nth-child(2) { --ilke-renk: var(--c2); } .ilke:nth-child(3) { --ilke-renk: var(--c4); } .ilke:nth-child(4) { --ilke-renk: var(--c3); }
.ilke .ilke-no { color: var(--ilke-renk); }
.ilke::before { background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--ilke-renk) 18%, transparent), transparent 60%); }
.ilke { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); }

/* CTA: yavaşça dönen çok renkli çerçeve */
.cta-ic { border-color: transparent; background-image: linear-gradient(var(--surface), var(--surface)), conic-gradient(from var(--aci), var(--c1), var(--c2), var(--c3), var(--c5), var(--c4), var(--c1)); background-origin: border-box; background-clip: padding-box, border-box; animation: don 14s linear infinite; }
.cta-ic::before { background: conic-gradient(from calc(var(--aci) + 180deg) at 0% 50%, rgba(124, 140, 255, .28), rgba(63, 216, 255, .16), rgba(192, 132, 252, .2), rgba(124, 140, 255, .28)); opacity: .9; }
@keyframes don { to { --aci: 360deg; } }

/* manyetik düğme */
.btn-ana { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); }
.btn-ana:hover { transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 1px), 0); }

/* menü: aktif sayfa */
.menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"]::after { transform: scaleX(1); background: linear-gradient(90deg, var(--c1), var(--c2)); }

@media (max-width: 880px) {
  .aurora i { filter: blur(50px); }
  .hero-gorsel .ekran, .hero-gorsel .ekran-kucuk { transform: none; }
  .kart, .ilke { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .akis-serit ul, .cta-ic, .hud::after, .vurgu { animation: none !important; }
  .vurgu { color: var(--accent-2); background: none; -webkit-text-fill-color: initial; }
  .kart, .ilke, .hero-gorsel .ekran, .hero-gorsel .ekran-kucuk, .btn-ana { transform: none !important; }
}

/* ---- dil seçici (28 Eyl) ---- */
.dil-sec { position: relative; }
.dil-dugme { font: 600 .78rem/1 var(--mono); letter-spacing: .08em; color: var(--text-2); background: rgba(255,255,255,.03); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.dil-dugme::after { content: " ▾"; font-size: .7em; }
.dil-dugme:hover, .dil-sec:focus-within .dil-dugme { color: #fff; border-color: rgba(255,255,255,.3); }
.dil-liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; margin: 0; padding: 6px; list-style: none; background: rgba(17,19,24,.96); border: 1px solid var(--hair-strong); border-radius: 10px; box-shadow: var(--shadow-float); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.dil-sec:hover .dil-liste, .dil-sec:focus-within .dil-liste, .dil-sec.acik .dil-liste { opacity: 1; visibility: visible; transform: none; }
.dil-liste a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--text-2); font-size: .9rem; }
.dil-liste a:hover { background: rgba(255,255,255,.06); color: #fff; }
.dil-liste a[aria-current="true"] { color: #fff; }
.dil-liste a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c6); box-shadow: 0 0 8px var(--c6); }
.menu a.dil-liste-a::after { display: none; }
@media (max-width: 880px) {
  .dil-sec { order: 10; }
  .dil-liste { position: static; opacity: 1; visibility: visible; transform: none; display: flex; gap: 4px; flex-wrap: wrap; background: none; border: 0; box-shadow: none; padding: 4px 0 0; }
  .dil-liste a { border: 1px solid var(--hair-strong); border-radius: 999px; padding: 6px 12px; }
  .dil-dugme { display: none; }
}

/* çok dilli metin uzunlukları (28 Eyl) */
.durum-satiri { flex-wrap: wrap; border-radius: 14px; line-height: 1.5; row-gap: 2px; }
.durum-satiri span { white-space: nowrap; }
.hero-kanit li { white-space: nowrap; }