/* EmlakOto — kurumsal tasarım sistemi
   Renk: antrasit / kırık beyaz, tek vurgu rengi (elektrik mavisi) sadece önemli noktalarda.
   Köşeler bilinçli olarak keskin (2px), gölge ve gradyan kullanılmaz; hiyerarşi tipografi ve boşlukla kurulur. */

:root {
    --murekkep: #0e1013;
    --murekkep-2: #16191e;
    --murekkep-3: #23272e;
    --kagit: #f4f3ef;
    --beyaz: #ffffff;
    --soluk: #5a5f67;
    --soluk-acik: #a3a7ad;
    --cizgi: rgba(14, 16, 19, .12);
    --cizgi-acik: rgba(244, 243, 239, .14);
    --vurgu: #2447d6;
    --vurgu-koyu: #1b37ab;
    --vurgu-acik: #8ea3ff;
    --logo-ic: var(--kagit);
    --yazi: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --kose: 2px;
    --ust-yukseklik: 80px;
    --gecis: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

:lang(ar) { --yazi: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif; }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-yukseklik) + 16px); }
body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font-family: var(--yazi);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
::selection { background: var(--vurgu); color: var(--beyaz); }
main:focus { outline: none; }

.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; inset-inline-start: 16px; top: -60px; z-index: 100; padding: .75rem 1rem; background: var(--vurgu); color: var(--beyaz); text-decoration: none; transition: top .2s; }
.atla:focus { top: 16px; }

.kap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }

/* ---------- Tipografi ---------- */
.baslik-1 { font-size: clamp(2.6rem, 6.4vw, 6.25rem); line-height: 1; letter-spacing: -.045em; font-stretch: 94%; }
.baslik-2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; font-stretch: 96%; }
.baslik-3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
.giris-metni { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--soluk); max-width: 38em; }
.koyu .giris-metni, .kahraman .giris-metni { color: var(--soluk-acik); }
.etiket {
    display: inline-flex; align-items: center; gap: .75rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--soluk);
}
.etiket::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.koyu .etiket, .kahraman .etiket { color: var(--soluk-acik); }
.vurgu-yazi { color: var(--vurgu); }
.koyu .vurgu-yazi, .kahraman .vurgu-yazi { color: var(--vurgu-acik); }

/* ---------- Düğmeler ---------- */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    min-height: 52px; padding: 0 1.5rem;
    border: 1px solid transparent; border-radius: var(--kose);
    font: 500 .95rem/1 var(--yazi); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.dugme .ok { transition: transform .35s var(--gecis); }
.dugme:hover .ok { transform: translateX(4px); }
[dir="rtl"] .dugme .ok { transform: scaleX(-1); }
[dir="rtl"] .dugme:hover .ok { transform: scaleX(-1) translateX(4px); }
.dugme--vurgu { background: var(--vurgu); color: var(--beyaz); }
.dugme--vurgu:hover { background: var(--vurgu-koyu); color: var(--beyaz); }
.dugme--koyu { background: var(--murekkep); color: var(--kagit); }
.dugme--koyu:hover { background: var(--murekkep-3); color: var(--kagit); }
.dugme--cizgi { border-color: var(--murekkep); color: var(--murekkep); }
.dugme--cizgi:hover { background: var(--murekkep); color: var(--kagit); }
.dugme--cizgi-acik { border-color: rgba(244, 243, 239, .35); color: var(--kagit); }
.dugme--cizgi-acik:hover { border-color: var(--kagit); background: var(--kagit); color: var(--murekkep); }
.dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; }

.metin-link {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px;
    transition: background-size .35s var(--gecis);
}
.metin-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Üst bölüm (header) ---------- */
.ust {
    position: fixed; inset: 0 0 auto; z-index: 50; height: var(--ust-yukseklik);
    color: var(--kagit); border-bottom: 1px solid transparent;
    transition: background-color .35s, color .35s, border-color .35s, transform .35s var(--gecis);
}
.ust__ic { height: 100%; display: flex; align-items: center; gap: 2rem; }
.ust.is-kaydirildi, .ust--sabit {
    color: var(--murekkep); background: rgba(244, 243, 239, .94); border-bottom-color: var(--cizgi);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    --logo-ic: var(--kagit);
}
.ust--sabit { position: sticky; }
.ust.is-gizli { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; }
.logo__img { display: block; height: 40px; width: auto; }
/* Marka alt başlığı: logonun yanında, ince çizgiyle ayrılmış; dar ekranda gizlenir */
.logo__alt { font-size: .72rem; font-weight: 500; letter-spacing: .01em; line-height: 1.25; max-width: 11.5rem; opacity: .8; padding-inline-start: .65rem; border-inline-start: 1px solid currentColor; }
@media (max-width: 1100px) { .logo__alt { display: none; } }
/* Başlık koyu zemin üzerindeyken (saydam üst, açık mobil menü) beyaz logo; açık zeminde (kaydırılmış / sabit) renkli logo */
.logo__renkli { display: none; }
.ust.is-kaydirildi .logo__beyaz, .ust--sabit .logo__beyaz { display: none; }
.ust.is-kaydirildi .logo__renkli, .ust--sabit .logo__renkli { display: block; }
.menu-acik .ust .logo__beyaz { display: block; }
.menu-acik .ust .logo__renkli { display: none; }
.ust--seffaf:not(.is-kaydirildi) { --logo-ic: var(--murekkep); }

.ana-menu { margin-inline: auto; }
.ana-menu ul { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.ana-menu a, .ust__giris {
    position: relative;   padding: .5rem 0; font-size: .92rem; text-decoration: none; opacity: .82; transition: opacity .2s;
}
.ana-menu a::after {
    content: ""; position: absolute; inset: auto 0 0; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform .4s var(--gecis);
}
.ana-menu a:hover, .ana-menu a[aria-current], .ust__giris:hover { opacity: 1; }
.ana-menu a:hover::after, .ana-menu a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.ust__arac { display: flex; align-items: center; gap: 1.25rem; margin-inline-start: auto; }
.ust__cta { min-height: 44px; padding: 0 1.15rem; }

.dil { position: relative; font-size: .85rem; }
.dil summary { list-style: none; cursor: pointer; padding: .5rem .25rem; opacity: .82; letter-spacing: .06em; }
.dil summary::-webkit-details-marker { display: none; }
.dil summary::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-start: .45rem; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-3px) rotate(45deg); }
.dil ul { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 170px; padding: .5rem; background: var(--beyaz); color: var(--murekkep); border: 1px solid var(--cizgi); }
.dil a { display: block; padding: .55rem .75rem; text-decoration: none; }
.dil a:hover, .dil a[aria-current] { background: var(--kagit); }

.menu-dugme { display: none; position: relative; width: 44px; height: 44px; margin-inline-end: -10px; background: none; border: 0; color: inherit; cursor: pointer; }
.menu-dugme i { position: absolute; inset-inline-start: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--gecis), top .35s var(--gecis); }
.menu-dugme i:first-of-type { top: 17px; }
.menu-dugme i:last-of-type { top: 25px; }
.menu-acik .menu-dugme i:first-of-type { top: 21px; transform: rotate(45deg); }
.menu-acik .menu-dugme i:last-of-type { top: 21px; transform: rotate(-45deg); }

.mobil-menu {
    position: fixed; inset: 0; z-index: 40; padding-top: calc(var(--ust-yukseklik) + 24px); overflow-y: auto;
    background: var(--murekkep); color: var(--kagit);
}
.mobil-menu ol { counter-reset: m; border-top: 1px solid var(--cizgi-acik); }
.mobil-menu li { counter-increment: m; border-bottom: 1px solid var(--cizgi-acik); }
.mobil-menu li a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; font-size: clamp(1.6rem, 7vw, 2.4rem); letter-spacing: -.03em; text-decoration: none; }
.mobil-menu li a::before { content: "0" counter(m); font-size: .75rem; color: var(--soluk-acik); letter-spacing: .1em; }
.mobil-menu li a[aria-current] { color: var(--vurgu-acik); }
.mobil-menu__alt { display: grid; gap: .75rem; padding: 2rem 0 3rem; }
.mobil-menu__dil { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: .9rem; }
.mobil-menu__dil a { text-decoration: none; opacity: .6; }
.mobil-menu__dil a[aria-current] { opacity: 1; text-decoration: underline; }
.menu-acik { overflow: hidden; }
.menu-acik .ust { color: var(--kagit); background: transparent; border-bottom-color: transparent; backdrop-filter: none; --logo-ic: var(--murekkep); }
.js .mobil-menu:not([hidden]) li { animation: menu-gir .6s var(--gecis) both; animation-delay: calc(var(--s, 0) * 45ms); }
@keyframes menu-gir { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Kahraman (hero) ---------- */
.kahraman { position: relative; background: var(--murekkep); color: var(--kagit); 
            padding: calc(var(--ust-yukseklik) + clamp(64px, 11vw, 50px)) 0 clamp(56px, 8vw, 50px); overflow: hidden; }
.kahraman__izgara {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(to right, var(--cizgi-acik) 1px, transparent 1px);
    background-size: calc((min(100vw, 1320px) - 2 * clamp(16px, 4vw, 48px)) / 6) 100%;
    background-position: center; mask-image: linear-gradient(to bottom, #000 20%, transparent 95%);
}
.kahraman .kap { position: relative; }
.kahraman h1 { max-width: 15ch; margin: 1.75rem 0 2rem; }
.kahraman--sayfa h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.4vw, 5rem); }
.kahraman__alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2.5rem; }
.kahraman__alt .giris-metni { margin: 0; }
.olgular { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--cizgi-acik); }
.olgular > div { padding: 1.5rem 1.5rem 0 0; }
.olgular > div + div { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--cizgi-acik); }
.olgular dt { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; font-weight: 500; }
.olgular dd { margin: .35rem 0 0; font-size: .9rem; color: var(--soluk-acik); }
.kirinti { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--soluk-acik); }
.kirinti a { text-decoration: none; }
.kirinti a:hover { color: var(--kagit); }
.kirinti li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }

/* ---------- Bölümler ---------- */
.bolum { padding-block: clamp(80px, 5vw, 160px); }
.bolum--beyaz { background: var(--beyaz); }
.bolum--koyu, .koyu { background: var(--murekkep); color: var(--kagit); }
.bolum--sinir { border-top: 1px solid var(--cizgi); }
.bolum__bas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: clamp(48px, 6vw, 88px); }
.bolum__bas .etiket { grid-column: 1 / span 3; align-self: start; padding-top: .9rem; }
.bolum__bas > div { grid-column: 4 / span 9; }
.bolum__bas h2 { max-width: 20ch; }
.bolum__bas p { margin-top: 1.5rem; }

.bildiri { font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.18; letter-spacing: -.03em; max-width: 26ch; font-weight: 400; }
.bildiri span { color: var(--soluk); }
.koyu .bildiri span { color: var(--soluk-acik); }

/* Numaralı editoryal satırlar (kartların yerine) */
.satirlar { border-top: 1px solid var(--cizgi); }
.koyu .satirlar, .koyu .satir { border-color: var(--cizgi-acik); }
.satir {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 5fr); gap: 1.5rem;
    padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--cizgi);
    transition: padding .45s var(--gecis);
}
.satir__no { font-size: .8rem; letter-spacing: .12em; color: var(--soluk); padding-top: .4rem; transition: color .3s; }
.satir h3 { transition: transform .45s var(--gecis); }
.satir p { margin: 0; color: var(--soluk); max-width: 36em; }
.koyu .satir p, .koyu .satir__no { color: var(--soluk-acik); }
.satir ul { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .9rem; }
.satir ul li::before { content: "— "; color: var(--soluk-acik); }
@media (hover: hover) {
    .satir:hover .satir__no { color: var(--vurgu); }
    .koyu .satir:hover .satir__no { color: var(--vurgu-acik); }
    .satir:hover h3 { transform: translateX(8px); }
    [dir="rtl"] .satir:hover h3 { transform: translateX(-8px); }
}

/* İki sütunlu anlatım + ürün paneli */
.ikili { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ikili--ters { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ikili--ters > :first-child { order: 2; }
.ikili h2 { margin: 1.25rem 0 1.5rem; }
.madde { margin: 2rem 0; border-top: 1px solid var(--cizgi); }
.madde li { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--cizgi); font-size: .98rem; }
.madde li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .6em; background: var(--vurgu); }
.koyu .madde, .koyu .madde li { border-color: var(--cizgi-acik); }

/* Ürün paneli: gerçek ekranı temsil eden sade arayüz çizimi */
.panel { background: var(--murekkep); color: var(--kagit); border: 1px solid var(--murekkep-3); font-size: .82rem; }
.koyu .panel { background: var(--murekkep-2); }
.panel__ust { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cizgi-acik); color: var(--soluk-acik); }
.panel__ust b { color: var(--kagit); font-weight: 500; }
.panel__filtre { display: flex; gap: .5rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cizgi-acik); overflow: hidden; }
.panel__filtre span { padding: .3rem .65rem; border: 1px solid var(--cizgi-acik); color: var(--soluk-acik); white-space: nowrap; }
.panel__filtre span:first-child { border-color: var(--vurgu-acik); color: var(--kagit); }
.panel table { width: 100%; border-collapse: collapse; }
.panel th { text-align: start; font-weight: 500; color: var(--soluk-acik); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .75rem 1.25rem; }
.panel td { padding: .85rem 1.25rem; border-top: 1px solid var(--cizgi-acik); white-space: nowrap; }
.panel td:first-child { color: var(--soluk-acik); }
.durum { display: inline-flex; align-items: center; gap: .4rem; }
.durum::before { content: ""; width: 6px; height: 6px; background: var(--vurgu-acik); }
.durum--bekle::before { background: var(--soluk-acik); }
.panel__govde { display: grid; grid-template-columns: 1fr 1fr; }
.panel__govde > div { padding: 1.25rem; border-top: 1px solid var(--cizgi-acik); }
.panel__govde > div + div { border-inline-start: 1px solid var(--cizgi-acik); }
.panel__govde small { display: block; color: var(--soluk-acik); margin-bottom: .35rem; }
.panel__govde strong { font-size: 1.05rem; font-weight: 500; }

/* Süreç adımları */
.surec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; }
.surec li { counter-increment: s; padding: 2rem 1.5rem 0 0; border-top: 1px solid var(--cizgi); position: relative; }
.surec li::before { content: "0" counter(s); display: block; margin-bottom: 3.5rem; font-size: .8rem; letter-spacing: .12em; color: var(--soluk); }
.surec li::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 48px; height: 1px; background: var(--vurgu); }
.surec h3 { margin-bottom: .75rem; }
.surec p { color: var(--soluk); font-size: .98rem; }

/* Paketler: kart yerine hizalı sütun tablosu */
.paketler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--cizgi); background: var(--beyaz); }
.paket { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); }
.paket + .paket { border-inline-start: 1px solid var(--cizgi); }
.paket--one { background: var(--murekkep); color: var(--kagit); }
.paket__rozet { align-self: flex-start; margin-bottom: 1.25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu-acik); }
.paket__rozet--bos { visibility: hidden; }
.paket h3 { font-size: 1.6rem; }
.paket > p { color: var(--soluk); margin: .75rem 0 2rem; min-height: 3.2em; }
.paket--one > p, .paket--one .paket__not { color: var(--soluk-acik); }
.paket__fiyat { display: flex; align-items: baseline; gap: .5rem; padding: 1.5rem 0; border-block: 1px solid var(--cizgi); }
.paket--one .paket__fiyat, .paket--one .paket__liste li { border-color: var(--cizgi-acik); }
.paket__fiyat strong { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.paket__fiyat span { color: var(--soluk); font-size: .9rem; }
.paket--one .paket__fiyat span { color: var(--soluk-acik); }
.paket__not { font-size: .85rem; color: var(--soluk); margin: .75rem 0 0; }
.paket__liste { margin: 1.5rem 0 2rem; flex: 1; }
.paket__liste li { padding: .7rem 0; border-bottom: 1px solid var(--cizgi); font-size: .95rem; }
.ekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--cizgi); }
.ekler > div { padding: 1.5rem 1.5rem 0 0; }
.ekler > div + div { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--cizgi); }
.ekler dt { font-size: .85rem; color: var(--soluk); font-weight: 400; }
.ekler dd { margin: .35rem 0 0; font-size: 1.25rem; letter-spacing: -.02em; }

/* Tema vitrini */
.vitrin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.tema { grid-column: span 4; display: flex; flex-direction: column; }
.tema--genis { grid-column: span 8; }
.tema__gorsel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--murekkep-2); }
.tema--genis .tema__gorsel { aspect-ratio: auto; flex: 1; min-height: 280px; }
.tema__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gecis); }
.tema:hover .tema__gorsel img { transform: scale(1.035); }
.tema__cizim { position: absolute; inset: 12% 10% 0; background: var(--kagit); padding: 8%; display: grid; grid-template-rows: auto 1fr auto; gap: 8%; transition: transform .8s var(--gecis); }
.tema:hover .tema__cizim { transform: translateY(-6px); }
.tema__cizim i { display: block; height: 6px; background: var(--murekkep); width: 40%; }
.tema__cizim b { display: block; background: var(--cizgi); }
.tema__cizim em { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tema__cizim em::before, .tema__cizim em::after, .tema__cizim em span { content: ""; height: 22px; background: var(--cizgi); }
.tema[data-ton="koyu"] .tema__cizim { background: var(--murekkep-3); }
.tema[data-ton="koyu"] .tema__cizim i { background: var(--kagit); }
.tema[data-ton="koyu"] .tema__cizim b, .tema[data-ton="koyu"] .tema__cizim em::before, .tema[data-ton="koyu"] .tema__cizim em::after, .tema[data-ton="koyu"] .tema__cizim em span { background: var(--cizgi-acik); }
.tema__bilgi { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; }
.tema__bilgi h3 { font-size: 1.2rem; }
.tema__bilgi p { margin: .25rem 0 0; color: var(--soluk); font-size: .92rem; }
.tema__bilgi span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; padding-top: .3rem; }

/* Blog */
.yazilar { border-top: 1px solid var(--cizgi); }
.yazi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); gap: 1.5rem; align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; }
.yazi time, .yazi__kategori { font-size: .85rem; color: var(--soluk); }
.yazi h3 { transition: color .25s; }
.yazi p { margin: .6rem 0 0; color: var(--soluk); max-width: 44em; }
.yazi__kategori { text-align: end; }
.yazi:hover h3 { color: var(--vurgu); }
.makale { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 1.5rem; }
.makale__meta { font-size: .88rem; color: var(--soluk); }
.makale__meta dl { position: sticky; top: calc(var(--ust-yukseklik) + 24px); margin: 0; }
.makale__meta dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 1.25rem; }
.makale__meta dd { margin: .25rem 0 0; color: var(--murekkep); }
.icerik { font-size: 1.125rem; line-height: 1.75; max-width: 42em; }
.icerik h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.5em 0 .75em; line-height: 1.2; }
.icerik h3 { font-size: 1.3rem; margin: 2em 0 .6em; }
.icerik p, .icerik ul, .icerik ol { margin-bottom: 1.25em; }
.icerik ul, .icerik ol { padding-inline-start: 1.25em; }
.icerik ul { list-style: square; }
.icerik ol { list-style: decimal; }
.icerik li { margin-bottom: .5em; }
.icerik li::marker { color: var(--vurgu); }
.icerik a { color: var(--vurgu); }
.icerik blockquote { margin: 2em 0; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--vurgu); font-size: 1.3rem; line-height: 1.5; }
.icerik table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.icerik th, .icerik td { text-align: start; padding: .7rem .5rem; border-bottom: 1px solid var(--cizgi); }
.icerik code { font-size: .9em; background: var(--beyaz); padding: .1em .3em; }

/* Formlar */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.form__tam { grid-column: 1 / -1; }
.alan label, .alan legend { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 500; }
.alan input, .alan select, .alan textarea {
    width: 100%; min-height: 52px; padding: .8rem 1rem; font: inherit; font-size: 1rem; color: var(--murekkep);
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--kose); transition: border-color .2s;
}
.alan textarea { min-height: 160px; resize: vertical; }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: rgba(14, 16, 19, .35); }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: var(--vurgu); }
.alan .hata, .field-validation-error { display: block; margin-top: .35rem; font-size: .85rem; color: #b42318; }
.input-validation-error { border-color: #b42318 !important; }
.onay { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: var(--soluk); }
.onay input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--vurgu); flex: 0 0 auto; }
.secenekler { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.secenekler label { position: relative; margin: 0; }
.secenekler input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.secenekler span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--cizgi); background: var(--beyaz); cursor: pointer; font-size: .92rem; transition: border-color .2s, background-color .2s, color .2s; }
.secenekler input:checked + span { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.secenekler input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.uyari { padding: 1rem 1.25rem; border-inline-start: 2px solid #b42318; background: var(--beyaz); margin-bottom: 1.5rem; }
.uyari ul { list-style: none; }
.basari { padding: clamp(28px, 4vw, 48px); background: var(--murekkep); color: var(--kagit); }
.basari h2 { margin-bottom: 1rem; }
.iletisim-bilgi dl { margin: 0; border-top: 1px solid var(--cizgi); }
.iletisim-bilgi dl > div { padding: 1.25rem 0; border-bottom: 1px solid var(--cizgi); }
.iletisim-bilgi dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); font-weight: 500; }
.iletisim-bilgi dd { margin: .35rem 0 0; font-size: 1.15rem; }
.iletisim-bilgi a { text-decoration: none; }

/* Kapanış çağrısı */
.kapanis { background: var(--murekkep); color: var(--kagit); padding-block: clamp(96px, 12vw, 180px); }
.kapanis h2 { max-width: 16ch; margin: 1.5rem 0 2.5rem; font-size: clamp(2.4rem, 5.6vw, 5.2rem); line-height: 1; letter-spacing: -.045em; }
.kapanis__alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; border-top: 1px solid var(--cizgi-acik); padding-top: 2rem; }
.kapanis__alt p { margin: 0; color: var(--soluk-acik); max-width: 34em; }

/* Alt bölüm (footer) */
.alt { background: var(--murekkep-2); color: var(--kagit); padding: clamp(64px, 8vw, 104px) 0 2rem; }
.alt__ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--cizgi-acik); }
.alt__logo { display: inline-block; margin-bottom: clamp(28px, 4vw, 48px); }
.alt__logo img { display: block; height: 44px; width: auto; }
.alt__logo-alt { display: block; margin-top: .5rem; font-size: .85rem; opacity: .75; }
.alt__slogan { margin: 0; max-width: 18ch; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; }
.alt__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 3rem 0; }
.alt h2 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soluk-acik); font-weight: 500; margin-bottom: 1.25rem; }
.alt li + li { margin-top: .6rem; }
.alt__izgara a { text-decoration: none; opacity: .85; }
.alt__izgara a:hover { opacity: 1; text-decoration: underline; }
.alt__alt { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--cizgi-acik); font-size: .85rem; color: var(--soluk-acik); }
.alt__alt a { text-decoration: none; }

/* Hata sayfası */
.hata-kod { font-size: clamp(6rem, 20vw, 16rem); line-height: .85; letter-spacing: -.06em; color: var(--murekkep-3); font-weight: 500; }

/* ---------- Hareket ---------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 220ms var(--gecis) both sayfa-cik; }
    ::view-transition-new(root) { animation: 380ms var(--gecis) both sayfa-gir; }
    @keyframes sayfa-cik { to { opacity: 0; } }
    @keyframes sayfa-gir { from { opacity: 0; transform: translateY(8px); } }

    .js [data-goster] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--gecis), transform .9s var(--gecis); transition-delay: calc(var(--s, 0) * 90ms); }
    .js [data-goster].is-gorunur { opacity: 1; transform: none; }
    .js [data-ac] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--gecis); }
    .js [data-ac].is-gorunur { clip-path: inset(0 0 0 0); }
    .js .kahraman [data-giris] { animation: giris 1.1s var(--gecis) both; animation-delay: calc(var(--s, 0) * 120ms + 80ms); }
    @keyframes giris { from { opacity: 0; transform: translateY(32px); } }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Duyarlı yerleşim ---------- */
@media (max-width: 1240px) {
    .ana-menu, .ust__giris, .dil { display: none; }
    .menu-dugme { display: block; }
}
@media (max-width: 960px) {
    .bolum__bas { grid-template-columns: 1fr; gap: 1.25rem; }
    .bolum__bas .etiket, .bolum__bas > div { grid-column: auto; padding-top: 0; }
    .kahraman__alt, .ikili, .ikili--ters { grid-template-columns: 1fr; }
    .ikili--ters > :first-child { order: 0; }
    .olgular, .ekler { grid-template-columns: 1fr 1fr; }
    .olgular > div:nth-child(3), .ekler > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .olgular > div:nth-child(n+3), .ekler > div:nth-child(n+3) { border-top: 1px solid var(--cizgi-acik); margin-top: 1.5rem; }
    .ekler > div:nth-child(n+3) { border-top-color: var(--cizgi); }
    .satir { grid-template-columns: 1fr; gap: .75rem; }
    .surec { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
    .paketler { grid-template-columns: 1fr; }
    .paket + .paket { border-inline-start: 0; border-top: 1px solid var(--cizgi); }
    .paket > p { min-height: 0; }
    .tema, .tema--genis { grid-column: span 6; }
    .tema--genis .tema__gorsel { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
    .yazi, .makale { grid-template-columns: 1fr; gap: .5rem; }
    .yazi__kategori { text-align: start; }
    .makale__meta dl { position: static; display: flex; flex-wrap: wrap; gap: 0 2rem; }
    .alt__izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    :root { --ust-yukseklik: 68px; }
    .ust__cta { display: none; }
    .kahraman h1 { margin: 1.25rem 0 1.5rem; }
    .dugmeler .dugme { flex: 1 1 100%; }
    .olgular, .ekler { grid-template-columns: 1fr; }
    .olgular > div, .olgular > div + div, .ekler > div, .ekler > div + div { border-inline-start: 0; padding-inline-start: 0; }
    .olgular > div + div { border-top: 1px solid var(--cizgi-acik); margin-top: 1.25rem; }
    .ekler > div + div { border-top: 1px solid var(--cizgi); margin-top: 1.25rem; }
    .surec { grid-template-columns: 1fr; }
    .surec li::before { margin-bottom: 1.5rem; }
    .tema, .tema--genis { grid-column: 1 / -1; }
    .form { grid-template-columns: 1fr; }
    .panel { font-size: .75rem; }
    .panel td, .panel th { padding-inline: .75rem; }
    .panel .gizle-mobil { display: none; }
    .alt__izgara { grid-template-columns: 1fr; }
    .alt__alt { flex-direction: column; }
}

/* ---------- Uygulama görünümü (üyelik, kayıt, hesap) — Bootstrap ile birlikte ---------- */
.gorunum-uygulama { background: var(--kagit); }
.uygulama-alani { padding-block: clamp(32px, 5vw, 64px) clamp(64px, 8vw, 104px); min-height: 60vh; }
.gorunum-uygulama h1, .gorunum-uygulama .h3 { font-weight: 500; letter-spacing: -.02em; }
.gorunum-uygulama .btn { border-radius: var(--kose); font-weight: 500; }
.gorunum-uygulama .btn-primary { --bs-btn-bg: var(--vurgu); --bs-btn-border-color: var(--vurgu); --bs-btn-hover-bg: var(--vurgu-koyu); --bs-btn-hover-border-color: var(--vurgu-koyu); --bs-btn-active-bg: var(--vurgu-koyu); --bs-btn-disabled-bg: var(--vurgu); --bs-btn-disabled-border-color: var(--vurgu); }
.gorunum-uygulama .btn-outline-primary { --bs-btn-color: var(--vurgu); --bs-btn-border-color: var(--vurgu); --bs-btn-hover-bg: var(--vurgu); --bs-btn-hover-border-color: var(--vurgu); }
.gorunum-uygulama .card, .gorunum-uygulama .form-control, .gorunum-uygulama .form-select, .gorunum-uygulama .alert, .gorunum-uygulama .input-group-text, .gorunum-uygulama .list-group { border-radius: var(--kose); }
.gorunum-uygulama .card { border-color: var(--cizgi); }
.gorunum-uygulama .bg-primary { background-color: var(--vurgu) !important; }
.gorunum-uygulama .border-primary { border-color: var(--vurgu) !important; }
.gorunum-uygulama .text-primary { color: var(--vurgu) !important; }
.gorunum-uygulama .form-control:focus, .gorunum-uygulama .form-check-input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 .2rem rgba(36, 71, 214, .18); }
.gorunum-uygulama .form-check-input:checked { background-color: var(--vurgu); border-color: var(--vurgu); }
.gorunum-uygulama .badge.rounded-pill { border-radius: var(--kose) !important; font-weight: 500; }
.eyebrow { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--soluk); }
.price-chip { padding: .45rem .75rem; color: var(--beyaz); background: var(--murekkep); font-size: .75rem; font-weight: 500; }
.language-configurator { padding: 1.5rem; background: var(--beyaz); border: 1px solid var(--cizgi); }
.language-group { padding: 1.2rem; background: var(--kagit); border: 1px solid var(--cizgi); }
.language-group legend { float: none; width: auto; margin: 0; font-size: 1rem; font-weight: 600; }
.language-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.language-option { display: flex; align-items: center; gap: .5rem; padding: .7rem; background: var(--beyaz); border: 1px solid var(--cizgi); cursor: pointer; }
.language-code { width: 27px; height: 27px; display: grid; place-items: center; color: var(--beyaz); background: var(--murekkep); font-size: .6rem; font-weight: 600; }
.paket-kart, .tema-kart { transition: border-color .2s; }
@media (max-width: 640px) { .language-options { grid-template-columns: 1fr; } }
.tuzak { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.metin-sayfa { max-width: 46em; }
.surec--dikey { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
.surec--dikey li { padding-bottom: 2rem; }
.surec--dikey li::before { margin-bottom: 1.25rem; }
.sozlesme-kutu { border: 1px solid var(--cizgi); background: var(--beyaz); }
.sozlesme-kutu summary { padding: .85rem 1rem; cursor: pointer; }
.sozlesme-kutu__icerik { max-height: 320px; overflow: auto; padding: 0 1rem 1rem; font-size: .92rem; line-height: 1.6; max-width: none; }
.sozlesme-kutu__icerik h2 { font-size: 1.05rem; margin: 1.25em 0 .5em; }
.dugme--hayalet { min-height: 44px; padding: 0 1.1rem; border-color: color-mix(in srgb, currentColor 35%, transparent); opacity: 1 !important; }
.dugme--hayalet:hover { border-color: currentColor; }
.ust__arac .ust__giris::after { display: none; }
.kahraman__fiyat { margin: 1rem 0 0; font-size: .9rem; color: var(--soluk-acik); }
.paket__al { width: 100%; }
.paket-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin: 1.5rem 0 0; font-size: .9rem; color: var(--soluk); }
.paket-alt a { color: var(--murekkep); }
.yasal-not { padding: .9rem 1.1rem; background: var(--beyaz); border-inline-start: 2px solid var(--vurgu); font-size: .95rem; }
.yasal-grup { margin-bottom: clamp(48px, 6vw, 88px); }
.yasal-grup .etiket { margin-bottom: 1.5rem; }
.yazi__kategori--bas { text-align: start; }
.magaza { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.magaza__yakinda { font-size: .9rem; color: var(--soluk-acik); border: 1px solid var(--cizgi-acik); padding: .8rem 1.1rem; }
.alt__odeme { color: var(--soluk-acik); }
/* Temalar sayfası: statik tema demoları */
.tema-galeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.tema-kart { display: flex; flex-direction: column; border: 1px solid var(--cizgi); background: var(--beyaz); }
.tema-kart__gorsel { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--murekkep-2); }
.tema-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--gecis); }
.tema-kart__gorsel:hover img { transform: scale(1.03); }
.tema-kart__ac { position: absolute; inset-inline-end: 16px; bottom: 16px; padding: .55rem .9rem; background: var(--murekkep); color: var(--kagit); font-size: .85rem; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.tema-kart__gorsel:hover .tema-kart__ac, .tema-kart__gorsel:focus-visible .tema-kart__ac { opacity: 1; transform: none; }
.tema-kart__govde { display: flex; flex-direction: column; gap: .4rem; padding: clamp(20px, 2.4vw, 28px); flex: 1; }
.tema-kart__bas { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tema-kart__bas h3 { font-size: 1.5rem; margin: 0; }
.tema-kart__etiket { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.tema-kart[data-ton="koyu"] .tema-kart__etiket { color: var(--vurgu); }
.tema-kart__govde > p { margin: 0; color: var(--soluk); }
.tema-kart__alt-baslik { margin-top: .9rem !important; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep) !important; }
.tema-kart__sayfalar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tema-kart__sayfalar a { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--cizgi); font-size: .85rem; color: var(--murekkep); text-decoration: none; }
.tema-kart__sayfalar a:hover { border-color: var(--murekkep); }
.tema-kart__paletler { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tema-kart__paletler a { display: inline-flex; gap: 3px; padding: 5px 7px; border: 1px solid var(--cizgi); border-radius: 999px; }
.tema-kart__paletler a:hover { border-color: var(--murekkep); }
.tema-kart__paletler i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tema-kart__dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.2rem; }
.tema-galeri__not { margin: 2rem 0 0; color: var(--soluk); font-size: .92rem; }
@media (max-width: 860px) { .tema-galeri { grid-template-columns: 1fr; } }

@media (max-width: 1280px) { .ana-menu ul { gap: 1.1rem; } .ana-menu a { font-size: .88rem; } }