/* =========================================================================
   KARAT A.Ş. — kurumsal site stilleri
   Kimlik: lacivert + altın, keskin köşeler, düz renk alanları. Değerler
   malzeme/kurumsal-kimlik/project/tokens.json kılavuzundan gelir; çerçeve yok.
   Düzen: mobil öncelikli, 8px ritim, kırılımlar 640 / 960 / 1200.
   ========================================================================= */

/* ---- Tasarım değişkenleri --------------------------------------------- */
:root {
    /* Koyu yüzeyler */
    --ink:          #0a1a3a;   /* karat-navy */
    --ink-2:        #0f2042;
    --ink-3:        #13254a;   /* surface-alt (koyu) */
    --ink-line:     #24365e;   /* line (koyu) */
    --on-ink:       #ffffff;
    --on-ink-muted: #b8c0d0;
    --ink-grad:     linear-gradient(150deg, var(--ink) 0%, var(--ink) 45%, var(--ink-3) 100%);
    --blue-glow:    rgba(36, 54, 94, 0.55);

    /* Açık yüzeyler */
    --paper:        #ffffff;   /* surface: sayfa zemini */
    --surface:      #f7f4ee;   /* surface-alt: kartlar ve bantlar */
    --line:         #e4ded2;
    --line-strong:  #cfc9bb;
    --field-border: #8a8576;
    --text:         #0a1a3a;
    --text-muted:   #4a5568;

    /* Karat altını */
    --gold:         #c9a25e;   /* dolgu ve cizgi; ustundeki metin lacivert */
    --gold-ink:     #e2c37f;   /* koyu zeminde altin tonlu metin */
    --gold-bright:  #e2c37f;
    --gold-deep:    #9e7440;   /* yalnizca cizgi ve golgeleme */
    --gold-text:    #85602f;   /* açık zeminde metin için (AA) */
    --gold-soft:    rgba(201, 162, 94, 0.14);
    --gold-line:    rgba(201, 162, 94, 0.32);

    /* Durum renkleri */
    --error:        #b42318;
    --error-soft:   #fdeceb;
    --success:      #17603a;
    --success-soft: #e8f5ee;

    --font-display: "Jost", "Futura", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    --fs-h1:   clamp(2.5rem, 1.35rem + 5vw, 5rem);
    --fs-h2:   clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
    --fs-h3:   clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
    --fs-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);

    --maxw:    1200px;
    --gutter:  clamp(20px, 5vw, 40px);
    --section: clamp(64px, 9vw, 128px);

    --radius:    4px;
    --radius-sm: 2px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 72px;

    /* Katman sırası */
    --z-header: 100;
    --z-menu:   110;
    --z-skip:   1000;
}

/* ---- Temel -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

main:focus { outline: none; }

::selection { background: var(--gold); color: var(--ink); }

.container {
    width: 100%;
    max-width: calc(var(--maxw) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -64px;
    z-index: var(--z-skip);
    padding: 12px 18px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.icon { flex: none; }
.text-gold { color: var(--gold-ink); display: block; }

/* ---- Küçük etiket (eyebrow) --------------------------------------------- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.eyebrow::before {
    content: "";
    width: 28px; height: 1px;
    background: currentColor;
    flex: none;
}
.eyebrow--gold { color: var(--gold-ink); }

/* ---- Düğmeler ve bağlantılar -------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }

.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-bright); }
.btn--gold:focus-visible { outline-color: var(--on-ink); }

.btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: var(--on-ink); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-ink); }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-3); }

.btn[disabled], .btn.is-loading { opacity: 0.6; cursor: progress; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-arrow .icon { transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--gold-text); border-color: var(--gold-deep); }
.link-arrow:hover .icon { transform: translate(2px, -1px); }
.link-arrow--gold { color: var(--gold-ink); border-color: var(--gold-line); }
.link-arrow--gold:hover { color: var(--gold-bright); border-color: var(--gold); }

/* Gövde metni içindeki marka bağlantısı */
.text-link {
    font-weight: 600;
    border-bottom: 1px solid var(--gold-deep);
    transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--gold-text); }
.site-footer .text-link { color: var(--on-ink); }
.site-footer .text-link:hover { color: var(--gold-ink); }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge--live    { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-line); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--gold-deep); }
.badge--dev     { border: 1px dashed var(--field-border); color: var(--text-muted); }
.badge--own     { background: var(--ink); color: var(--gold-ink); }
.badge--partner { background: #ecebe6; color: var(--text-muted); }

/* ---- Üst menü ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--ink);
    color: var(--on-ink);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-header.is-scrolled {
    background: rgba(10, 26, 58, 0.9);
    border-bottom-color: var(--ink-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--on-ink);
}
/* Kılavuz: yatay logo en az 120px genişlik; 36px yükseklik ≈ 122px */
.brand__logo { display: block; width: auto; height: 36px; }
.site-footer .brand__logo { height: 44px; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-right: -12px;
    background: none;
    border: 0;
    color: var(--on-ink);
    border-radius: var(--radius-sm);
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobil: menü başlığın altında açılan panel. JS yoksa hep açık durur. */
.nav {
    flex-basis: 100%;
    padding: 8px 0 28px;
    border-top: 1px solid var(--ink-line);
}
.js .nav { display: none; }
.js .nav.is-open { display: block; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }

.nav__item { border-bottom: 1px solid var(--ink-line); }

.nav__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--on-ink);
    transition: color 0.2s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__link.is-active { color: var(--gold-ink); }

.nav__caret { display: none; }

.nav__dropdown { padding: 0 0 16px; }

.menu-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s var(--ease);
}
.menu-link__no {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
}
.menu-link__body { display: grid; gap: 2px; }
.menu-link__name { font-family: var(--font-display); font-size: 1rem; color: var(--on-ink); }
.menu-link__desc { font-size: 0.875rem; color: var(--on-ink-muted); line-height: 1.4; }
.menu-link:hover .menu-link__name,
.menu-link[aria-current="page"] .menu-link__name { color: var(--gold-ink); }

.nav__dropdown-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gold-ink);
}

.nav__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
}

.lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--on-ink-muted);
    transition: color 0.2s var(--ease);
}
.lang:hover { color: var(--gold-ink); }

@media (min-width: 960px) {
    .js .nav-toggle, .nav-toggle { display: none; }

    .site-header__inner { flex-wrap: nowrap; }

    .nav, .js .nav {
        display: flex;
        align-items: center;
        gap: 40px;
        flex-basis: auto;
        padding: 0;
        border: 0;
        overflow: visible;
    }

    .nav__list { display: flex; align-items: center; gap: 36px; }
    .nav__item { position: relative; display: flex; align-items: center; border: 0; }

    .nav__link {
        min-height: var(--header-h);
        font-size: 0.9375rem;
        color: var(--on-ink-muted);
    }
    .nav__link:hover { color: var(--on-ink); }
    .nav__link[aria-current="page"],
    .nav__link.is-active { color: var(--on-ink); box-shadow: inset 0 -2px 0 var(--gold); }

    .nav__caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px; height: 44px;
        margin-left: 2px;
        background: none;
        border: 0;
        color: var(--on-ink-muted);
        border-radius: var(--radius-sm);
    }
    .nav__caret .icon { transition: transform 0.2s var(--ease); }

    .nav__dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: var(--z-menu);
        width: 400px;
        padding: 12px;
        background: var(--ink-2);
        border: 1px solid var(--ink-line);
        border-radius: var(--radius);
        box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    }
    .nav__item--menu:hover .nav__dropdown,
    .nav__item--menu:focus-within .nav__dropdown,
    .nav__item--menu.is-open .nav__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    .nav__item--menu:hover .nav__caret .icon,
    .nav__item--menu.is-open .nav__caret .icon { transform: rotate(180deg); }

    .menu-link { padding: 12px 14px; }
    .menu-link:hover { background: var(--ink-3); }

    .nav__dropdown-all {
        width: 100%;
        margin-top: 8px;
        padding: 8px 14px 4px;
        border-top: 1px solid var(--ink-line);
    }

    .nav__actions { gap: 20px; padding: 0; }
}

/* ---- Kesim taş grafiği ---------------------------------------------------- */
.gem { width: 100%; height: auto; }
.gem__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: gem-draw 1.6s var(--ease) forwards;
}
.gem--static .gem__line { animation: none; stroke-dashoffset: 0; }
.gem__facet { animation: gem-fade 1.2s ease-out 0.9s both; }
.gem--static .gem__facet { animation: none; }

@keyframes gem-draw { to { stroke-dashoffset: 0; } }
@keyframes gem-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Ana sayfa girişi ------------------------------------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(168deg, var(--ink) 0%, var(--ink) 50%, var(--ink-3) 100%);
    color: var(--on-ink);
    isolation: isolate;
}
/* Yavaşça gezinen ışık lekeleri: altın + mavi */
.hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(34% 38% at 76% 38%, rgba(201, 162, 94, 0.17), transparent 70%),
        radial-gradient(40% 44% at 18% 88%, var(--blue-glow), transparent 70%),
        radial-gradient(28% 32% at 52% 12%, rgba(36, 54, 94, 0.4), transparent 70%);
    animation: hero-drift 20s ease-in-out infinite alternate;
    will-change: transform;
}
/* İnce ızgara dokusu, kenarlara doğru söner */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(184, 192, 208, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 192, 208, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(75% 80% at 68% 42%, #000 10%, transparent 78%);
    mask-image: radial-gradient(75% 80% at 68% 42%, #000 10%, transparent 78%);
}
.hero__art .gem { animation: gem-float 10s ease-in-out infinite; }

/* Giriş öğeleri sırayla yükselerek belirir */
.hero__inner > * { animation: rise 0.9s var(--ease) both; }
.hero__inner > :nth-child(2) { animation-delay: 0.10s; }
.hero__inner > :nth-child(3) { animation-delay: 0.22s; }
.hero__inner > :nth-child(4) { animation-delay: 0.34s; }
.hero__inner > :nth-child(5) { animation-delay: 0.48s; }

.hero .text-gold {
    background: linear-gradient(100deg, var(--gold-ink) 0%, var(--gold-ink) 38%, #f2d893 50%, var(--gold-ink) 62%, var(--gold-ink) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.08em;
    animation: shimmer 7s linear 1.2s infinite;
}

@keyframes hero-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes gem-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -120% 0; }
}
.hero__art {
    position: absolute;
    z-index: -1;
    top: 6%;
    right: -46%;
    width: 130%;
    max-width: 780px;
    opacity: 0.4;
    pointer-events: none;
}
.hero__inner {
    padding-block: clamp(64px, 11vw, 144px) clamp(48px, 7vw, 88px);
}
.hero__title {
    max-width: 17ch;
    margin-top: 28px;
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: -0.035em;
}
.hero__lead {
    max-width: 56ch;
    margin-top: 28px;
    font-size: var(--fs-lead);
    color: var(--on-ink-muted);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    margin-top: clamp(56px, 8vw, 104px);
    padding-top: 32px;
    border-top: 1px solid var(--ink-line);
}
.facts__item { display: flex; flex-direction: column-reverse; gap: 6px; }
.facts dt { font-size: 0.9375rem; color: var(--on-ink-muted); }
.facts dd {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .hero__art { right: -22%; width: 86%; opacity: 0.55; }
}
@media (min-width: 960px) {
    .hero__art { top: 50%; right: -14%; width: 52%; transform: translateY(-54%); opacity: 0.9; }
    .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Bölümler -------------------------------------------------------------- */
.section { padding-block: var(--section); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--tight + .section--tight { padding-top: 0; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head__title { margin-top: 20px; font-size: var(--fs-h2); }
.section-head__lead { margin-top: 20px; font-size: var(--fs-lead); color: var(--text-muted); max-width: 60ch; }

/* ---- Sektör satırları ------------------------------------------------------- */
.sector-list { border-top: 1px solid var(--line-strong); }
.sector-list > li { border-bottom: 1px solid var(--line-strong); }

.sector-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "no arrow" "main main" "brands brands";
    gap: 12px 16px;
    align-items: center;
    padding: 28px 0;
    transition: background-color 0.25s var(--ease), padding 0.25s var(--ease);
}
.sector-row::before {
    content: "";
    position: absolute;
    left: 0; top: -1px;
    width: 100%; height: 2px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.sector-row:hover::before, .sector-row:focus-visible::before { transform: scaleX(1); }

.sector-row__no {
    grid-area: no;
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}
.sector-row__main { grid-area: main; display: grid; gap: 8px; }
.sector-row__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.sector-row__tagline { color: var(--text-muted); max-width: 44ch; }
.sector-row__brands { grid-area: brands; display: flex; flex-wrap: wrap; gap: 8px; }
.sector-row__arrow {
    grid-area: arrow;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
                border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sector-row:hover .sector-row__arrow {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--gold-ink);
    transform: translateX(4px);
}

.sector-list--compact { margin-top: 24px; }
.sector-list--compact .sector-row__name { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }

@media (min-width: 960px) {
    .sector-row {
        grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1fr) 48px;
        grid-template-areas: "no main brands arrow";
        gap: 32px;
        padding: 40px 0;
    }
    .sector-row:hover { padding-inline: 20px; background: var(--surface); }
    .sector-row__brands { justify-content: flex-end; }
    .sector-list--compact .sector-row { padding: 28px 0; }
    .sector-list--compact .sector-row:hover { padding-inline: 20px; }
}

/* ---- Çalışma ilkeleri -------------------------------------------------------- */
.principles { display: grid; gap: 40px; }
.principle { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.principle__no {
    display: block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}
.principle__title { margin-top: 20px; font-size: var(--fs-h3); }
.principle__text { margin-top: 12px; color: var(--text-muted); }

@media (min-width: 768px) {
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (min-width: 1100px) {
    .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- İkili kartlar (hikâye + global) ------------------------------------------ */
.duo { display: grid; gap: 24px; }
.duo__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 4vw, 56px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.duo__card--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.duo__title { margin-top: 20px; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
.duo__text { margin-top: 16px; color: var(--text-muted); }
.duo__card--ink .duo__text { color: var(--on-ink-muted); }
.duo__card .link-arrow { margin-top: auto; }

.mini-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 28px 0 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    width: 100%;
    font-size: 0.9375rem;
    color: var(--text-muted);
}
.mini-timeline span {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.city-list {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 28px 0 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-line);
    font-family: var(--font-display);
    font-size: 1.375rem;
}
.city-list li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.city-list small { font-family: var(--font-body); font-size: 0.9375rem; color: var(--on-ink-muted); }
.city-list__dot {
    width: 8px; height: 8px;
    border-radius: 0;
    background: var(--gold);
    align-self: center;
    flex: none;
}

@media (min-width: 900px) {
    .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- İletişim çağrısı ----------------------------------------------------------- */
.cta-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 28px;
    align-items: center;
    padding: clamp(32px, 5vw, 72px);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius);
    isolation: isolate;
}
.cta-panel__art {
    position: absolute;
    z-index: -1;
    right: -120px; top: 50%;
    width: 420px;
    transform: translateY(-50%);
    opacity: 0.35;
    pointer-events: none;
}
.cta-panel__title { font-size: var(--fs-h2); max-width: 18ch; }
.cta-panel__text { margin-top: 16px; color: var(--on-ink-muted); max-width: 48ch; }
.cta-panel .btn { justify-self: start; }

@media (min-width: 900px) {
    .cta-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
    .cta-panel .btn { justify-self: end; }
}

/* ---- İç sayfa girişi --------------------------------------------------------------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-ink);
    isolation: isolate;
}
.page-hero__art {
    position: absolute;
    z-index: -1;
    right: -180px; top: 50%;
    width: 560px;
    transform: translateY(-50%);
    opacity: 0.3;
    pointer-events: none;
}
.page-hero__inner { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.page-hero__title {
    margin-top: 24px;
    max-width: 18ch;
    font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.page-hero__lead { margin-top: 24px; max-width: 58ch; font-size: var(--fs-lead); color: var(--on-ink-muted); }
.page-hero--center .page-hero__inner { padding-block: clamp(80px, 12vw, 160px); }

.breadcrumb { margin-bottom: clamp(40px, 6vw, 72px); font-size: 0.875rem; color: var(--on-ink-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-inline: 10px; opacity: 0.5; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--gold-ink); }
.breadcrumb [aria-current] { color: var(--on-ink); }

/* ---- Sektörler sayfası: sektör blokları ------------------------------------------------ */
.sector-block {
    display: grid;
    gap: 32px;
    padding-block: clamp(40px, 6vw, 80px);
    border-top: 1px solid var(--line-strong);
}
.sector-block:first-child { padding-top: 0; border-top: 0; }
.sector-block:last-child { padding-bottom: 0; }

.sector-block__no {
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}
.sector-block__name {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
}
.sector-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--ink);
    color: var(--gold-ink);
    border-radius: var(--radius-sm);
    flex: none;
}
.sector-block__tagline { margin-top: 16px; font-size: var(--fs-lead); font-weight: 500; }
.sector-block__intro { margin-top: 12px; color: var(--text-muted); max-width: 52ch; }
.sector-block__head .btn { margin-top: 28px; }

.sector-block__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.brand-list { margin-top: 12px; border-top: 1px solid var(--line-strong); }
.brand-list__item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.brand-list__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.brand-list__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.brand-list__text { margin-top: 6px; color: var(--text-muted); }

@media (min-width: 960px) {
    .sector-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
    .sector-block__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---- Sektör sayfası: giriş ve faaliyetler ------------------------------------------------ */
.intro-grid { display: grid; gap: 40px; }
.intro-grid__text {
    margin-top: 24px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.activity-list { border-top: 1px solid var(--line-strong); }
.activity {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.activity__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-top: 2px;
    background: var(--gold-soft);
    color: var(--gold-text);
    border-radius: 0;
}
.activity__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.activity__text { margin-top: 4px; color: var(--text-muted); }

@media (min-width: 960px) {
    .intro-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
}

/* ---- Marka kartları ------------------------------------------------------------------------ */
.brand-grid { display: grid; gap: 24px; }
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(24px, 3vw, 40px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.brand-card:hover { border-color: var(--gold-deep); }
.brand-card--partner { background: transparent; border-style: dashed; border-color: var(--line-strong); }

.brand-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    width: 100%;
}
.brand-card__name { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; }
.brand-card__kind { margin-top: 8px; font-weight: 600; color: var(--gold-text); }
.brand-card__text { margin-top: 16px; color: var(--text-muted); }

.brand-card__facts {
    display: grid;
    gap: 0;
    width: 100%;
    margin-top: 24px;
    border-top: 1px solid var(--line);
}
.brand-card__facts > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
}
.brand-card__facts dt { color: var(--text-muted); }
.brand-card__facts dd { font-weight: 600; text-align: right; }
.brand-card .link-arrow { margin-top: 20px; }
.brand-card__facts + .link-arrow { margin-top: 16px; }

@media (min-width: 768px) {
    .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Hakkımızda ------------------------------------------------------------------------------ */
.about-grid { display: grid; gap: 40px; }
.prose__title { font-size: var(--fs-h2); }
.prose p { margin-top: 20px; max-width: 62ch; color: var(--text-muted); }
.prose .prose__lead {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--text);
}

.fact-card {
    align-self: start;
    padding: clamp(24px, 3vw, 40px);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius);
}
.fact-card__title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.fact-card__list { margin-top: 16px; }
.fact-card__list > div { padding: 14px 0; border-top: 1px solid var(--ink-line); }
.fact-card__list dt { font-size: 0.875rem; color: var(--on-ink-muted); }
.fact-card__list dd { margin-top: 2px; font-weight: 500; }

@media (min-width: 960px) {
    .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; }
}

/* Zaman çizelgesi */
.timeline { max-width: 880px; }
.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "dot when" "dot body";
    column-gap: 16px;
    padding-bottom: 36px;
}
.timeline__item::before {
    content: "";
    position: absolute;
    left: 11.5px; top: 14px; bottom: -14px;
    width: 1px;
    background: var(--line-strong);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__when {
    grid-area: when;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
}
.timeline__when:empty { display: none; }
.timeline__dot {
    grid-area: dot;
    position: relative;
    width: 9px; height: 9px;
    margin: 10px 0 0 7.5px;
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--field-border);
}
.timeline__item--key .timeline__dot {
    width: 13px; height: 13px;
    margin: 8px 0 0 5.5px;
    background: var(--gold);
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 4px var(--gold-soft);
}
.timeline__body { grid-area: body; }
.timeline__title { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; }
.timeline__text { margin-top: 6px; color: var(--text-muted); max-width: 60ch; }

@media (min-width: 768px) {
    .timeline__item {
        grid-template-columns: 96px 24px minmax(0, 1fr);
        grid-template-areas: "when dot body";
        column-gap: 24px;
        padding-bottom: 44px;
    }
    .timeline__item::before { left: calc(96px + 24px + 11.5px); }
    .timeline__when { text-align: right; }
    .timeline__when:empty { display: block; }
}

/* ---- Global ------------------------------------------------------------------------------------ */
.entity-grid { display: grid; gap: 24px; }
.entity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 4vw, 56px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.entity--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.entity__country {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.entity--ink .entity__country { color: var(--gold-ink); }
.entity__name { margin-top: 16px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.entity__role { margin-top: 8px; font-weight: 600; }
.entity__text { margin-top: 16px; color: var(--text-muted); }
.entity--ink .entity__text { color: var(--on-ink-muted); }
.entity__address {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    width: 100%;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}
.entity__address .icon { margin-top: 5px; color: var(--gold-text); }
.entity--ink .entity__address { border-color: var(--ink-line); }
.entity--ink .entity__address .icon { color: var(--gold-ink); }
.entity__contact { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.9375rem; }
.entity__contact .icon { color: var(--gold-text); }
.entity--ink .entity__contact .icon { color: var(--gold-ink); }
.entity__contact a { display: inline-flex; align-items: center; min-height: 32px; border-bottom: 1px solid var(--gold-line); transition: color 0.2s var(--ease); }
.entity__contact a:hover { color: var(--gold-text); }
.entity--ink .entity__contact a:hover { color: var(--gold-ink); }
.entity .link-arrow { margin-top: 20px; }

.market-grid { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.market { display: grid; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.market__name { font-size: var(--fs-h3); }
.market__items { display: grid; gap: 8px; color: var(--text-muted); }
.market__items li { position: relative; padding-left: 20px; }
.market__items li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.72em;
    width: 8px; height: 1px;
    background: var(--gold-deep);
}

@media (min-width: 768px) {
    .entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
}

/* ---- İletişim ------------------------------------------------------------------------------------ */
.contact-grid { display: grid; gap: 40px; }

.contact-info__title, .form-card__title { font-size: var(--fs-h3); }
.contact-info__list { margin-top: 20px; border-top: 1px solid var(--line-strong); }
.contact-info__list > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info__list dt {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact-info__list dd { margin-top: 4px; font-weight: 500; }
.contact-info__list a { border-bottom: 1px solid var(--gold-deep); transition: color 0.2s var(--ease); }
.contact-info__list a:hover { color: var(--gold-text); }

.form-card {
    padding: clamp(24px, 4vw, 48px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.form { display: grid; gap: 20px; margin-top: 20px; }
.form__note { font-size: 0.9375rem; color: var(--text-muted); }
.form__row { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; align-content: start; }
.field label { font-weight: 600; }
.field__req { color: var(--error); }
.field__opt { font-weight: 400; color: var(--text-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 1rem;
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.field select { cursor: pointer; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline: none;
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 3px var(--gold-line);
}
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.field__help { font-size: 0.9375rem; color: var(--text-muted); }
.field__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--error);
}
.field__error .icon { margin-top: 4px; }

.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field--check { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.field--check input {
    width: 24px; height: 24px;
    margin: 2px 0 0;
    accent-color: var(--ink);
    cursor: pointer;
}
.field--check label { font-weight: 400; cursor: pointer; }
.field--check label a { font-weight: 600; border-bottom: 1px solid var(--gold-deep); }
.field--check label a:hover { color: var(--gold-text); }
.field--check .field__error { grid-column: 1 / -1; }

.form .btn { justify-self: start; }

.alert {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid;
    border-radius: var(--radius-sm);
}
.alert .icon { margin-top: 3px; }
.alert p { margin-top: 2px; }
.alert--success { background: var(--success-soft); border-color: #b5dcc5; color: var(--success); }
.alert--error   { background: var(--error-soft); border-color: #f3c0bb; color: var(--error); }

@media (min-width: 640px) {
    .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; }
    .contact-info { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---- Alt bilgi -------------------------------------------------------------------------------------- */
.site-footer {
    margin-top: clamp(24px, 4vw, 56px);
    padding-top: clamp(56px, 7vw, 96px);
    background: var(--ink);
    color: var(--on-ink-muted);
    font-size: 0.9375rem;
}
.view-contact .site-footer, .view-404 .site-footer { margin-top: 0; }

.site-footer__grid { display: grid; gap: 40px; }
.site-footer__blurb { margin-top: 20px; max-width: 36ch; }
.site-footer__legal { margin-top: 16px; font-size: 0.875rem; color: var(--on-ink); }

.site-footer__title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: 8px;
}
.site-footer__title--spaced { margin-top: 28px; }

.site-footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    transition: color 0.2s var(--ease);
}
.site-footer__col a:hover { color: var(--gold-ink); }

.site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.site-footer__contact .icon { margin-top: 5px; color: var(--gold-ink); }
.site-footer__contact a { min-height: 0; }
.site-footer__social { display: flex; gap: 20px; margin-top: 12px; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;
    margin-top: clamp(40px, 6vw, 72px);
    padding-block: 24px;
    border-top: 1px solid var(--ink-line);
    font-size: 0.875rem;
}

.site-footer__legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--ink-line);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-footer__legal-link:hover { color: var(--gold-ink); border-color: var(--gold); }

@media (min-width: 640px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .site-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: 48px; }
}

/* ---- Referanslar -------------------------------------------------------------------------------------- */
.section--flush-top { padding-top: 0; }

.ref-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ref {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.25s var(--ease);
}
.section--surface .ref { background: var(--paper); }
.ref:hover { border-color: var(--gold-deep); }
.ref__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
}
.ref img {
    width: auto;
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.ref:hover img, .ref__link:focus-visible img { filter: none; opacity: 1; }

.ref--empty {
    gap: 8px;
    background: transparent;
    border-style: dashed;
    border-color: var(--line-strong);
    font-size: 0.875rem;
    color: var(--text-muted);
}
.section--surface .ref--empty { background: transparent; }
.ref--empty:hover { border-color: var(--line-strong); }

.ref-more { margin-top: 32px; }

.dev-note {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    max-width: 760px;
    background: var(--gold-soft);
    border: 1px dashed var(--gold-deep);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--gold-text);
}
.dev-note .icon { margin-top: 3px; }
.empty-note { font-size: var(--fs-lead); color: var(--text-muted); }

@media (min-width: 640px)  { .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .ref-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .ref-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Yasal metin (KVKK) --------------------------------------------------------------------------------- */
.legal { display: grid; gap: 40px; }

.legal__toc {
    align-self: start;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.legal__toc-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.legal__toc ol { margin-top: 12px; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    min-height: 40px;
    font-size: 0.9375rem;
    color: var(--text-muted);
    transition: color 0.2s var(--ease);
}
.legal__toc a::before { content: counter(toc) "."; color: var(--gold-text); font-variant-numeric: tabular-nums; min-width: 1.5em; }
.legal__toc a:hover { color: var(--text); }
.legal__updated { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-muted); }

.legal__body { max-width: 72ch; }
.legal__section + .legal__section { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line-strong); }
.legal__section h2 { font-size: var(--fs-h3); line-height: 1.3; }
.legal__no { color: var(--gold-text); margin-right: 4px; }
.legal__section p { margin-top: 16px; color: var(--text-muted); }
.legal__section ul { margin-top: 16px; display: grid; gap: 10px; color: var(--text-muted); }
.legal__section li { position: relative; padding-left: 22px; }
.legal__section li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.72em;
    width: 8px; height: 1px;
    background: var(--gold-deep);
}

@media (min-width: 960px) {
    .legal { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; }
    .legal__toc { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ---- Madencilik: ana sayfa girişi (görselli) --------------------------------------------------- */
.hero--media .hero__art { left: -30%; right: auto; opacity: 0.16; }
.hero__grid { display: grid; gap: 40px; align-items: center; }
.hero--media .hero__title { max-width: 15ch; }
.hero__media { position: relative; max-width: 560px; margin-inline: auto; width: 100%; }
.hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, #000 62%, transparent 100%);
}
.hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: -8px;
}
.hero__chips span {
    padding: 3px 10px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
    background: rgba(10, 26, 58, 0.6);
    font-size: 0.8125rem;
    color: var(--on-ink-muted);
}
.hero--media .hero__inner { padding-block: clamp(48px, 8vw, 104px) clamp(48px, 7vw, 88px); }
.hero--media .facts { margin-top: clamp(40px, 6vw, 72px); }
.hero--media .eyebrow { display: inline-flex; align-items: center; gap: 10px; }

@media (min-width: 960px) {
    .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
    .hero__media { margin-right: -24px; }
}

/* ---- Ürün kartları ---------------------------------------------------------------------------- */
.product-grid { display: grid; gap: 24px; }
.product-card { display: flex; }
.product-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.section--surface .product-card__link { background: var(--paper); }
.product-card__link:hover {
    border-color: var(--gold-line);
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -24px rgba(10, 26, 58, 0.45);
}
.product-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card__link:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 24px; }
.product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-card__no {
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}
.product-card__formula {
    padding: 2px 8px;
    border: 1px solid var(--gold-line);
    border-radius: var(--radius-sm);
    background: var(--gold-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gold-text);
}
.product-card__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.product-card__text { color: var(--text-muted); font-size: 0.9375rem; }
.product-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
}
.product-card__more .icon { transition: transform 0.25s var(--ease); }
.product-card__link:hover .product-card__more { color: var(--gold-text); }
.product-card__link:hover .product-card__more .icon { transform: translateX(4px); }

.product-grid--compact .product-card__body { padding: 18px 20px 20px; gap: 6px; }
.product-grid--compact .product-card__name { font-size: 1.375rem; }

@media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1100px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .product-card__body { padding: 20px 22px 22px; }
    .product-card__name { font-size: 1.625rem; }
}

@media (min-width: 1100px) {
    .product-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Izgaranın son kutusu: teklif çağrısı */
.product-card--cta .product-card__link {
    justify-content: space-between;
    min-height: 100%;
    padding: 28px 24px;
    background: var(--ink-grad);
    border-color: var(--ink);
    color: var(--on-ink);
}
.product-card--cta .product-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border: 1px solid var(--gold-line);
    color: var(--gold-ink);
    border-radius: var(--radius-sm);
}
.product-card--cta .product-card__link > span:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.product-card--cta .product-card__name { margin-top: 24px; color: var(--on-ink); }
.product-card--cta .product-card__text { margin-top: 10px; color: var(--on-ink-muted); }
.product-card--cta .product-card__more { margin-top: 24px; color: var(--gold-ink); }
.product-card--cta .product-card__link:hover { border-color: var(--gold); }
.product-card--cta .product-card__link:hover .product-card__more { color: var(--gold-bright); }

/* ---- Uygulama alanları -------------------------------------------------------------------------- */
.industry-grid { display: grid; gap: 0; align-items: start; border-top: 1px solid var(--line-strong); }
.industry {
    align-content: start;
    height: 100%;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "icon name" "icon text" "icon tags";
    gap: 6px 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
.industry__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--ink);
    color: var(--gold-ink);
    border-radius: var(--radius-sm);
}
.industry__name { grid-area: name; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.industry__text { grid-area: text; color: var(--text-muted); font-size: 0.9375rem; }
.industry__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.tag--link { transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease); color: var(--text); }
.tag--link:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }

@media (min-width: 768px) {
    .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
@media (min-width: 1100px) {
    .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Tedarik süreci ve ambalaj ---------------------------------------------------------------------- */
.steps { display: grid; gap: 24px; counter-reset: none; }
.step {
    position: relative;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border: 1px solid var(--gold-line);
    background: var(--gold-soft);
    color: var(--gold-text);
    border-radius: var(--radius-sm);
}
.step__no {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--line-strong);
}
.step__title { margin-top: 24px; font-size: 1.25rem; line-height: 1.3; }
.step__text { margin-top: 8px; color: var(--text-muted); font-size: 0.9375rem; }

.pack {
    display: grid;
    gap: 16px;
    margin-top: 32px;
    padding: 24px;
    background: var(--ink-grad);
    color: var(--on-ink);
    border-radius: var(--radius);
}
.pack__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.pack__list { display: grid; gap: 12px; }
.pack__list li { display: grid; gap: 2px; }
.pack__list strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.pack__list span { font-size: 0.9375rem; color: var(--on-ink-muted); }

@media (min-width: 640px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pack { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; padding: 28px 32px; }
    .pack__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .pack__list li { padding-left: 24px; border-left: 1px solid var(--ink-line); }
}

/* ---- Sıkça sorulanlar ------------------------------------------------------------------------------- */
.faq { max-width: 880px; border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 16px 0;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { flex: none; color: var(--gold-text); transition: transform 0.25s var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__q:hover { color: var(--gold-text); }
.faq__a { padding: 0 0 24px; max-width: 68ch; color: var(--text-muted); }

/* ---- Madencilik vurgusu: sektör satırı ve bloğu ------------------------------------------------------- */
.sector-row--lead .sector-row__name::after {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-left: 12px;
    vertical-align: middle;
    background: var(--gold);
    transform: rotate(45deg);
}
.sector-block__products { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 32px; }

/* ---- Hakkımızda: ürün düğmesi ------------------------------------------------------------------------- */
.prose .prose__actions { margin-top: 32px; }

/* ---- Ürün detay sayfası ---------------------------------------------------------------------------------- */
.product-intro { display: grid; gap: 40px; align-items: start; }
.product-intro__media { overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.product-intro__media img { width: 100%; height: auto; }
.product-intro__lead {
    margin-top: 20px;
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.45;
}
.product-intro__text { margin-top: 16px; color: var(--text-muted); }
.product-intro__actions { margin-top: 32px; }

.spec { margin-top: 28px; border-top: 1px solid var(--line-strong); }
.spec > div { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.spec dd { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 500; }

.product-details { display: grid; gap: 48px; }
.product-details__title { font-size: var(--fs-h3); margin-bottom: 20px; }
.props { display: grid; gap: 12px; }
.props li { display: flex; gap: 12px; align-items: flex-start; }
.props .icon { margin-top: 5px; color: var(--gold-text); }

.quote-box {
    margin-top: 32px;
    padding: 24px;
    background: var(--ink-grad);
    color: var(--on-ink);
    border-radius: var(--radius);
}
.quote-box__title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.quote-box__list { display: grid; gap: 8px; margin: 16px 0 20px; color: var(--on-ink-muted); }
.quote-box__list li { position: relative; padding-left: 20px; }
.quote-box__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.72em;
    width: 8px; height: 1px;
    background: var(--gold);
}

.section--tight-bottom { padding-bottom: clamp(56px, 7vw, 96px); }

@media (min-width: 960px) {
    .product-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
    .product-intro__media { position: sticky; top: calc(var(--header-h) + 32px); }
    .product-details { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
    .product-details__props { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---- Menü: altı bağlantı sığsın ---------------------------------------------------------------------------- */
@media (min-width: 960px) and (max-width: 1180px) {
    .nav { gap: 24px; }
    .nav__list { gap: 20px; }
    .nav__actions { gap: 14px; }
}

/* ---- Kaydırınca belirme ------------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Hareket ve derinlik -------------------------------------------------------------------------------- */
/* Kaydırma ilerleme çizgisi (JS ekler) */
.scroll-progress {
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    pointer-events: none;
}

/* Altın düğme: yükselme + ışık süpürmesi */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(201, 162, 94, 0.65); }
.btn--gold:hover::after { left: 130%; transition: left 0.7s var(--ease); }
.btn--gold:active { transform: scale(0.98); }
.btn--ghost { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.03); }
.btn--ghost:hover { transform: translateY(-2px); background: rgba(201, 162, 94, 0.08); }
.btn { transition-property: background-color, color, border-color, transform, box-shadow; transition-duration: 0.25s; }

/* Koyu yüzeyler: lacivert geçiş + imleci izleyen ışık */
.page-hero, .cta-panel, .duo__card--ink, .entity--ink, .fact-card { background: var(--ink-grad); }
.page-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(30% 40% at 82% 40%, rgba(201, 162, 94, 0.12), transparent 70%),
        radial-gradient(36% 46% at 10% 100%, var(--blue-glow), transparent 70%);
    animation: hero-drift 22s ease-in-out infinite alternate;
}
.page-hero__inner > * { animation: rise 0.8s var(--ease) both; }
.page-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
.page-hero__inner > :nth-child(3) { animation-delay: 0.16s; }
.page-hero__inner > :nth-child(4) { animation-delay: 0.26s; }

.cta-panel, .duo__card--ink, .entity--ink, .fact-card { position: relative; overflow: hidden; }
.cta-panel::after, .duo__card--ink::after, .entity--ink::after, .fact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 162, 94, 0.13), transparent 62%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.cta-panel:hover::after, .duo__card--ink:hover::after, .entity--ink:hover::after, .fact-card:hover::after { opacity: 1; }
.cta-panel__art .gem, .page-hero__art .gem { animation: gem-float 12s ease-in-out infinite; }

/* Kartlar: üzerine gelince hafifçe yükselir */
.brand-card, .duo__card, .entity, .ref, .form-card {
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.brand-card:hover, .duo__card:hover, .entity:hover, .ref:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -22px rgba(10, 26, 58, 0.3);
}
.ref--empty:hover { transform: none; box-shadow: none; }

.principle { position: relative; }
.principle::before {
    content: "";
    position: absolute;
    left: 0; top: -1px;
    width: 100%; height: 2px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.principle:hover::before { transform: scaleX(1); }

.facts__item { transition: transform 0.3s var(--ease); }
.facts__item:hover { transform: translateY(-3px); }
.facts__item:hover dd { color: var(--gold-ink); }
.facts dd { transition: color 0.3s var(--ease); }

.city-list__dot { animation: dot-pulse 2.6s ease-out infinite; }
@keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 162, 94, 0.55); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(201, 162, 94, 0); }
}

/* Etiket çizgisi görünürken uzar */
.js .reveal.is-visible .eyebrow::before, .hero .eyebrow::before, .page-hero .eyebrow::before { animation: line-grow 0.9s var(--ease) 0.3s both; transform-origin: left; }
@keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 960px) {
    .nav__link { position: relative; }
    .nav__link::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.35s var(--ease);
    }
    .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
    .nav__link[aria-current="page"]::after, .nav__link.is-active::after { display: none; }
}

/* ---- Hareket azaltma tercihi ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
    .gem__line { stroke-dashoffset: 0; animation: none; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---- Yazdırma ---------------------------------------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .hero__art, .page-hero__art, .cta-panel, .nav-toggle { display: none !important; }
    .hero, .page-hero { background: none; color: #000; }
    .js .reveal { opacity: 1; transform: none; }
}
