/* =========================================================================
   Safe Light — HOME
   Ölçüler Figma "HOME" (4:373) 1920px çerçevesinden birebir alınmıştır.

   ÖLÇEK: Tüm uzunluklar rem cinsinden ve kök yazı boyutu görünür alana bağlı
   (1920px'te tam 16px). Böylece tasarımın oranları her genişlikte korunur;
   1920'den dar ekranlarda sayfa küçülerek aynı kompozisyonu gösterir.
   Tek ayar noktası aşağıdaki html kuralıdır. Kırılma noktaları bilerek px.
   ========================================================================= */

:root {
    --ink:        #131718;
    --ink-deep:   #131717;
    --panel:      #363c42;
    --sage:       #b7cabf;
    --sage-line:  #b6cabf;
    --sage-ink:   #415248;
    --sage-mid:   #4a5b51;
    --grey-1:     #8e9393;
    --grey-2:     #7f8e86;
    --grey-3:     #63706a;
    --grey-4:     #434646;
    --cue-line:   #656f67;
    --cue-dot:    #cbc1b8;
    --field-hint: #6e7479;
    --send:       #bed0c6;
    --send-ink:   #191e1f;

    --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-display: 'Cinzel Decorative', Georgia, serif;
    /* Tasarımdaki "Aeonik TRIAL" lisanslı bir font; Inter en yakın serbest
       karşılığı (nötr geometrik grotesk, tam Türkçe desteği). Gerçek font
       satın alınırsa yalnızca bu satır değişir. */
    --font-alt:     'Inter', system-ui, -apple-system, sans-serif;

    --shell:  77.5rem;
    --gutter: 1.5rem;
    --radius: 0.6875rem;

    /* Yazı ölçeği. Sayfa oransal küçüldüğü için küçük punto metinler dar
       ekranda okunamaz hâle geliyordu (1508px'te 10px -> 7.9px). Her tier
       tasarım değeriyle ölçeklenir ama okunabilir bir tabanın altına inmez:
       geniş ekranda rem, dar ekranda px kazanır. Adlar tasarım pikselidir.
       Tek istisna --fs-10; 10px her ölçekte küçük kaldığı için 11px'e alındı.
       Metin hâlâ küçük geliyorsa yalnızca buradaki px tabanları büyütülür. */
    --fs-10: max(0.625rem,  11px);
    --fs-12: max(0.75rem,   12px);
    --fs-13: max(0.8125rem, 13px);
    --fs-15: max(0.9375rem, 15px);
    --fs-18: max(1.125rem,  16px);
    --fs-20: max(1.25rem,   17px);
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* 1920px -> 16px (tasarım ölçeği 1). Alt sınır 12px: 1440px'in altında
       küçülme durur, oradan sonrası kırılma noktalarına bırakılır. */
    font-size: clamp(12px, calc(100vw / 120), 16px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { border-style: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; }

.visually-hidden {
    position: absolute;
    width: 0.0625rem; height: 0.0625rem;
    margin: -0.0625rem; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--sage);
    color: var(--sage-ink);
    font-size: var(--fs-13);
    letter-spacing: 0.1em;
    text-decoration: none;
}
.skip-link:focus { left: 1.5rem; top: 1.5rem; }

:focus-visible { outline: 0.125rem solid var(--sage); outline-offset: 0.1875rem; }

/* ---------- layout shell ---------- */

.shell {
    width: 100%;
    max-width: calc(var(--shell) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band-dark { background: var(--ink); }

/* =========================================================================
   Ortak bileşenler
   ========================================================================= */

/* --- hap butonu (Teklif Al / proje butonları) --- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.40625rem;
    height: max(2.0625rem, 33px);
    padding: 0 1.25rem 0 1.1875rem;
    border-radius: max(1.03125rem, 16.5px);
    background: var(--sage);
    color: var(--sage-ink);
    font-size: var(--fs-15);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}
.pill:hover { background: #c8d8ce; transform: translateY(-0.0625rem); }

.pill__arrow { width: max(1.03125rem, 16.5px); height: max(0.8125rem, 13px); flex: none; }
.pill__arrow--flip { transform: rotate(180deg); }

/* Yazı tabana oturduğu için kutu da oturmalı; yoksa dar ekranda metin taşıyor.
   Sabit genişlik yerine alt sınır: 1920'de tasarımın 14.5625rem'i geçerli,
   dar ekranda 224px'in altına inmez, metin yine de sığmazsa kutu büyür. */
.pill--wide {
    min-width: max(14.5625rem, 224px);
    padding: 0 0.9375rem 0 0.8125rem;
    justify-content: space-between;
    gap: 0.90625rem;
    font-weight: 600;
}
.pill--lead { justify-content: flex-start; gap: 0.78125rem; }

/* --- ok'lu bağlantı --- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--sage);
    font-size: var(--fs-10);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
}
.link-arrow img { flex: none; transition: transform .3s ease; }
.link-arrow:hover img { transform: translateX(0.3125rem); }

.link-arrow--lg  { gap: 0.71875rem; font-size: var(--fs-15); letter-spacing: 0.1em; }
.link-arrow--20  { gap: 1.25rem;   font-size: var(--fs-20); letter-spacing: 0.1em; font-weight: 300; }

/* --- dairesel rozet --- */

.disc {
    --gx: 26.1%;  --gy: 24.55%;  --gw: 47.8%;  --gh: 50.42%;
    --lw: 82.68%; --lh: 64.22%;  --lr: 60deg;

    position: relative;
    display: block;
    width: 10.1875rem;
    height: 10.1875rem;
    flex: none;
    /* Halka dönerken kare sınır kutusu ~%41 büyüyor ve dar ekranda belgeyi
       taşırıyordu. Çizim daire olduğu için daireye kırpmak görüntüyü
       değiştirmiyor, yalnızca boş köşeleri kesiyor. */
    overflow: hidden;
    border-radius: 50%;
}
.disc__ring {
    display: block;
    width: 100%;
    height: 100%;
    animation: disc-spin 26s linear infinite;
}
.disc--flip .disc__ring { animation-name: disc-spin-flip; }

.disc__glyph {
    position: absolute;
    left: var(--gx); top: var(--gy);
    width: var(--gw); height: var(--gh);
    display: flex;
    align-items: center;
    justify-content: center;
}
.disc__glyph img {
    width: var(--lw);
    height: var(--lh);
    transform: rotate(var(--lr));
}

@keyframes disc-spin      { to   { transform: rotate(360deg); } }
@keyframes disc-spin-flip { from { transform: rotate(180deg); } to { transform: rotate(-180deg); } }

/* --- dikey ayraç --- */

/* position: relative — tasarımda çizgi, üstündeki bölümün fotoğraf katmanına
   taşar ve onun üzerinde çizilir. Konumlanmamış bırakılırsa .showcase__media
   (mutlak konumlu) daha geç boyanıp çizginin üst 34px'ini örtüyor. */
.rule-v {
    position: relative;
    display: block;
    width: 0.125rem;
    height: 10.1875rem;
    margin-inline: auto;
    border-radius: 0.0625rem;
    background: var(--sage-line);
}
.rule-v--tall { height: 13.375rem; }

/* --- tipografi yardımcıları --- */

.display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--sage);
}
.display--regular { font-weight: 400; }

.statement {
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: 0.3125rem;
    text-align: center;
    color: var(--sage);
}
.statement__soft { font-weight: 300; }

.lede-20 {
    font-size: var(--fs-20);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--sage);
}

/* =========================================================================
   Üst bar
   ========================================================================= */

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 40;
    padding-top: 5.25rem;
}

/* Üst bar tasarımda 367 → 1540 arasına oturur (diğer bölümlerden dar). */
.site-header__row {
    --shell: 73.3125rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-header__side {
    display: flex;
    align-items: center;
    gap: 4.5rem;
    flex: 1 1 0;
    min-width: 0;
}
.site-header__side--end { justify-content: flex-end; gap: 3.75rem; }

.site-header__brand img { display: block; width: 8.6875rem; height: 6.375rem; }

.social { display: flex; align-items: center; gap: 2rem; }
.social a { display: block; opacity: .85; transition: opacity .25s ease; }
.social a:hover { opacity: 1; }
.social img { display: block; }

.lang {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--fs-10);
    letter-spacing: 0.13em;
}
.lang a { color: var(--grey-1); text-decoration: none; }
.lang a.is-active { color: var(--sage); }
.lang span { color: var(--grey-1); }

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sage);
    font-size: var(--fs-10);
    font-weight: 400;
    letter-spacing: 0.33em;
    cursor: pointer;
}
.menu-toggle img { display: block; width: max(1.25rem, 20px); height: max(0.5625rem, 9px); }

.menu-toggle--close { letter-spacing: 0.33em; gap: 1.0625rem; }
.menu-toggle--close img { width: max(0.75rem, 12px); height: max(1.0625rem, 17px); }

/* --- tam ekran menü (Figma 1:2) --- */

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden auto;
    background: var(--ink);
}
.site-menu[hidden] { display: none; }
.site-menu:focus { outline: none; }

/*
   Ekrana sabit arka plan. position:fixed olduğu için katman kaydırılsa bile
   yerinde kalır; overflow:hidden sayesinde taşan desen kaydırma alanını
   uzatmaz (aksi hâlde 68.875rem'e uzayıp altta boş koyu şerit bırakıyordu).
*/
.site-menu__bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.site-menu__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/*
   Desen sabit piksel değil, görünür alan genişliğine oranlı. Tasarım 120rem
   çerçevede: sol 1080, üst 315, 1073×787. Oranlar (1080/1920 vb.) korunduğu
   için tarayıcı yakınlaştırmasında da tasarımdaki büyüklükte durur.
*/
.site-menu__pattern {
    position: absolute;
    top: 16.406vw;    /* 315 / 1920  */
    left: 56.25vw;    /* 1080 / 1920 */
    width: 55.885vw;  /* 1073 / 1920 */
    height: 40.99vw;  /* 787 / 1920  */
    max-width: none;
}

/*
   Tasarım 67.5rem yüksekliğe göre çizilmiş. Sabit boşluk yerine esnek yerleşim:
   üst bar tepede kalır, geri kalan blok kalan alana ortalanır. 67.5rem'te
   tasarımdaki konumların ~0.3125rem yakınına oturur, kısa ekranlarda taşmaz.
*/
.site-menu__inner {
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding-top: 5.25rem;
    padding-bottom: 1.5rem;
}

/* --- bağlantı listesi --- */

.site-menu__nav {
    /* Metin bloğu tasarımda 14,0.3125rem sola kaçık; ok'la birlikte ortalanıyor. */
    /*
       Tasarımda blok ekranın tam dikey ortasında: (1080-351)/2 = 365.
       Doğal üst kenar = 84 (üst boşluk) + 102 (üst bar) = 186,
       dolayısıyla üst marj = 50dvh - 175.5 - 186. Kısa ekranlarda 1.5rem'e iner.
    */
    margin-top: clamp(1.5rem, calc(50vh - 22.59375rem), 11.1875rem);
    margin-top: clamp(1.5rem, calc(50dvh - 22.59375rem), 11.1875rem);
    padding-right: 1.8125rem;
    text-align: center;
}
/* > ul > li: kurallar alt menüye sızmasın (aksi hâlde açılır menü maddeleri
   de 1.5rem üst marj ve 2.5rem yazı boyutu alıyor). */
.site-menu__nav > ul > li + li { margin-top: 1.5rem; }
/* Alt menüsü olan madde <button>, diğerleri <a> — ikisi de aynı görünür.
   Düğmenin varsayılan dolgusu/çerçevesi sıfırlanmalı, yoksa satır kutusu
   büyüyüp maddeleri tasarımdaki konumdan kaydırıyor. */
.site-menu__link {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 3.1875rem;
    letter-spacing: 0.25rem;
    color: #fff;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color .25s ease;
}
.site-menu__link:hover { color: var(--sage); }

/* Ok'un konum referansı: yalnızca bağlantıyı saran, daralan bir kutu.
   Böylece "100%" bağlantının genişliği olur ve ok akış dışında kalıp
   başlığın ortalanmasını etkilemez. */
.site-menu__item { position: relative; display: inline-block; }

.site-menu__caret {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.375rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1875rem;
    height: 1.375rem;
    margin-top: -0.6875rem;
}
.site-menu__caret img {
    width: 1.375rem;
    height: 1.1875rem;
    transform: rotate(90deg);
    transition: transform .25s ease;
}
/* Açıkken ok yukarı döner (aria-expanded artık düğmenin kendisinde). */
.site-menu__link[aria-expanded="true"] .site-menu__caret img { transform: rotate(-90deg); }

/* --- ÜRÜNLERİMİZ açılır menüsü (Figma 65:2 – 65:19) --- */

/*
   Dolgu tasarımda rgba(74,91,81,.8); müşteri isteğiyle daha saydam yapıldı.
   Arka planda hareketli bulut videosu olduğu için saydamlık arttıkça yazı
   okunmaz hâle geliyordu — bulanıklık bunu dengeliyor. Tek ayar noktası bu
   iki satır; destelemeyen tarayıcıda yalnızca dolgu görünür.
*/
.menu-sub {
    width: 15.25rem;
    margin: 1rem auto 0;
    padding-block: 1.625rem;
    border-radius: 1.3125rem;
    background: rgba(74, 91, 81, .38);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    text-align: left;
}
.menu-sub[hidden] { display: none; }

.menu-sub a {
    position: relative;
    display: block;
    padding: 0 3.125rem 0 0.9375rem;
    font-size: var(--fs-20);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: #fff;
    text-decoration: none;
    transition: color .25s ease;
}
.menu-sub a:hover { color: var(--sage); }

/* Ayraç 1px beyaz, soldan 15px içeride ve 197px genişliğinde (65:16). */
.menu-sub li + li::before {
    content: '';
    display: block;
    width: 12.3125rem;
    height: 1px;
    margin: 0.9375rem 0 0.625rem 0.9375rem;
    background: #fff;
}

/* Tasarımda ok yalnızca ilk maddede duruyor; üç madde de aynı yapıda olduğu
   için bu bir üzerine gelme durumu olarak okundu (bkz. README). */
.menu-sub__caret {
    position: absolute;
    top: 50%;
    right: 1.28125rem;
    width: 1.375rem;
    height: 1.1875rem;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease;
}
.menu-sub a:hover .menu-sub__caret,
.menu-sub a:focus-visible .menu-sub__caret { opacity: 1; }

/* --- iletişim satırı --- */

.site-menu__mail {
    margin-top: 3.375rem;
    font-size: var(--fs-10);
    font-weight: 300;
    letter-spacing: 0.29em;
    text-align: center;
    color: var(--sage);
}
.site-menu__mail a {
    font-weight: 600;
    letter-spacing: 0.464em;
    color: inherit;
    text-decoration: none;
}
.site-menu__mail a:hover { text-decoration: underline; }

/* --- sosyal daireler --- */

.site-menu__social {
    display: flex;
    justify-content: center;
    gap: 5.125rem;
    margin-top: 3.1875rem;
}
.site-menu__social a {
    position: relative;
    display: block;
    width: 3.1875rem;
    height: 3.1875rem;
    transition: transform .25s ease;
}
.site-menu__social a:hover { transform: translateY(-0.1875rem); }
.site-menu__ring { display: block; width: 3.1875rem; height: 3.1875rem; }
.site-menu__glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(-50%, -50%);
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 67.5rem;
    background: var(--ink);
    overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 23, 24, 0) 70.972%, #121617 100%);
}

.hero__inner { position: relative; padding-top: 19.8125rem; }

/* --- logo kilidi (835 × 190 kutusu içinde birebir konumlar) --- */

.lockup {
    position: relative;
    width: min(52.1875rem, 88vw);
    aspect-ratio: 835 / 190;
    margin-inline: auto;
}
.lockup img { position: absolute; display: block; }
.lockup__word { left: 0;       top: 9.395%;  width: 95.729%; height: 90.606%; }
.lockup__reg  { left: 95.454%; top: 0;       width: 4.547%;  height: 19.941%; }
.lockup__tag  { left: 0;       top: 87.368%; width: 59.598%; height: 11.078%; }

.hero__actions {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 4.0625rem;
}

/* --- sağdaki kaydırma göstergesi --- */

.scroll-cue {
    position: absolute;
    top: 27.375rem;
    left: 50%;
    transform: translateX(37.375rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-cue__tick { width: 0.125rem; height: 1rem; border-radius: 0.0625rem; background: var(--cue-dot); }
.scroll-cue__dot  { width: 0.25rem; height: 0.25rem;  border-radius: 50%; background: var(--cue-dot); margin-top: 0.4375rem; }
.scroll-cue__line { width: 0.125rem; height: 6.125rem; border-radius: 0.0625rem; background: var(--cue-line); margin-top: 0.5625rem; }

/* --- hero alt bloğu --- */

/* Tasarımda bu blok sayfa ortasına değil 23.5625rem'e hizalı (377 → 1647). */
/*
   margin-top: auto tanıtım kartını hero'nun altına iter; ama içerik hero
   yüksekliğini aşınca auto sıfıra düşüyor ve kart proje butonlarına
   yapışıyordu (1441px ve altında, telefonda tamamen bitişik).
   padding-top her koşulda uygulanır: yer varken auto onu emer, yani
   1920'deki yerleşim değişmez; yer yokken alt sınır olur.
*/
.hero__foot {
    --shell: 79.375rem;
    position: relative;
    margin-top: auto;
    margin-inline: auto;
    padding-top: 4.5rem;
    padding-bottom: 9.8125rem;
}

.hero__brief {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
}

/* Kart yüksekliği de tabana oturur; içindeki yazı küçülmeyi bıraktığı için
   oransal yükseklik dar ekranda metni kırpıyordu (overflow: hidden). */
.promo-card {
    flex: 0 0 29.6875rem;
    display: flex;
    height: max(10.125rem, 162px);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
    text-decoration: none;
    transition: background-color .25s ease;
}
.promo-card:hover { background: #414850; }

.promo-card__thumb { flex: 0 0 11.3125rem; overflow: hidden; }
.promo-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; }

.promo-card__text { display: block; padding: 1.5rem 1rem 0 1.3125rem; }
.promo-card__title {
    display: block;
    font-size: var(--fs-18);
    font-weight: 700;
    line-height: 1.278;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.promo-card__sub {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--fs-10);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.promo-card__title span, .promo-card__sub span { display: block; }

.hero__brief-text {
    margin-top: 0.75rem;
    font-size: var(--fs-12);
    font-weight: 400;
    line-height: 1.808;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.hero__brief-text:nth-of-type(1) { flex: 0 1 18.125rem; }
.hero__brief-text:nth-of-type(2) { flex: 0 1 22.4375rem; }

.hero__about { margin-top: 0.375rem; padding-right: 2rem; text-align: right; }

/* =========================================================================
   Çözümün bir parçası olun
   ========================================================================= */

.showcase { position: relative; background: var(--ink); }
.showcase__media { position: absolute; inset: 0; overflow: hidden; }

/*
   Sahne 1920×1080 oranını korur; böylece pencere görseli ile altındaki
   görüntü her ekran boyutunda hizalı kalır (tasarımdaki 399,1304 / 1122×632).
*/
.showcase__stage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    min-width: 100%;
    aspect-ratio: 1920 / 1080;
}
.showcase__video {
    position: absolute;
    left: 20.781%;
    top: 20.741%;
    display: block;
    width: 58.438%;
    height: 58.519%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
}
.showcase__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase__inner {
    position: relative;
    min-height: 67.5rem;
    padding-top: 25.4375rem;
}

.showcase__title {
    margin-left: 1.4375rem;
    font-size: 3.125rem;
    line-height: 4.1875rem;
    letter-spacing: 0.3125rem;
}

.showcase__link { margin: 0.8125rem 0 0 1.4375rem; }

/* Mutlak konum dolgu kutusuna göre ölçülür; içerik kenarı için gutter eklenir. */
.showcase__disc { position: absolute; top: 46.53125rem; right: calc(var(--gutter) + 6.0625rem); }

/* =========================================================================
   Manifesto
   ========================================================================= */

.manifesto__rule-1 { margin-top: -2.125rem; }
.manifesto__statement { margin-top: 6.125rem; }
.manifesto__rule-2 { margin-top: 6rem; }

/* Sütun bloğu 26.4375rem'ten başlar (423 → 1543). */
.manifesto__cols {
    --shell: 70rem;
    margin-top: -6.75rem;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
}

.manifesto__lede {
    width: 27rem;
    flex: none;
    margin-top: 4rem;
    font-size: var(--fs-20);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: var(--sage);
}

.manifesto__body {
    width: 25.3125rem;
    flex: none;
    margin: 8.5rem 0 0 6.5625rem;
    font-size: var(--fs-15);
    font-weight: 300;
    line-height: 1.467;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.manifesto__body p + p { margin-top: 1.375rem; }

/* "Broşürü İndir!" tek satır; etiket tabana oturunca mühür ve kutu da oturmalı. */
.brochure {
    width: max(7.25rem, 116px);
    flex: none;
    margin-left: 3.875rem;
    text-decoration: none;
}
.brochure__seal {
    display: block;
    width: max(7.25rem, 116px);
    height: max(7.25rem, 116px);
    transition: transform .4s ease;
}
.brochure:hover .brochure__seal { transform: rotate(15deg); }
.brochure__label {
    display: block;
    margin-top: 1rem;
    font-size: var(--fs-15);
    font-weight: 300;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--sage);
}

/* =========================================================================
   Pist görseli
   ========================================================================= */

.feature { padding-top: 12.1875rem; }
.feature__inner { position: relative; padding-top: 5.125rem; }
.feature__media { aspect-ratio: 1238 / 714; border-radius: 0.125rem; overflow: hidden; }
.feature__media img,
.feature__media video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.feature__disc { position: absolute; top: 0; left: calc(var(--gutter) + 1.6875rem); z-index: 2; }

/* =========================================================================
   Makaleler
   ========================================================================= */

.articles { padding-top: 7.6875rem; padding-bottom: 0; }

.articles__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
}

.articles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.25rem;
    margin-top: 1.6875rem;
}

.article-card {
    position: relative;
    height: 12.75rem;
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
    text-decoration: none;
    transition: background-color .25s ease;
}
.article-card:hover { background: #414850; }

.article-card__thumb {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14.3125rem;
    overflow: hidden;
}
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }

.article-card__art,
.article-card__arrow {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
}

/* =========================================================================
   Önceliklerimiz  (koyu bant 43rem'de biter, altı beyaz)
   ========================================================================= */

.priorities {
    background: linear-gradient(to bottom,
        var(--ink) 0, var(--ink) 43rem,
        #fff 43rem, #fff 100%);
    padding-top: 13.0625rem;
    padding-bottom: 4.8125rem;
}

.priorities__inner { --shell: 72.5rem; }

.priorities__title {
    margin-left: 29.3125rem;
    font-size: 3.4375rem;
    font-weight: 400;
    line-height: 4.625rem;
    letter-spacing: 0.34375rem;
}

.priorities__grid {
    display: grid;
    grid-template-columns: 22.1875rem 18.375rem 22.1875rem;
    gap: 4.875rem;
    align-items: start;
    margin-top: -1.25rem;
}

.priority { margin-top: var(--offset, 0); }

.priority__media { height: var(--h); overflow: hidden; }
.priority__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50%) center;
}

.priority__title {
    margin-top: 1.5rem;
    font-size: 2.5rem;
    line-height: 1.35;
    letter-spacing: 0.25rem;
    color: var(--sage-mid);
}
.priority__title--sm { font-size: 2.3125rem; letter-spacing: 0.23125rem; }

.priority__body {
    margin-top: 0.75rem;
    font-size: var(--fs-13);
    font-weight: 300;
    line-height: 1.462;
    letter-spacing: 0.1em;
    color: var(--ink);
}

/* =========================================================================
   Kapanış
   ========================================================================= */

.closing { padding-bottom: 4.6875rem; background: #fff; }
.closing__statement { margin-top: 3.75rem; }
.closing .rule-v:last-child { margin-top: 3.6875rem; }

/* =========================================================================
   Alt bilgi
   ========================================================================= */

.site-footer {
    position: relative;
    padding: 9.25rem 0 1.5rem;
    background: var(--ink-deep);
    overflow: hidden;
}

/* Aynı gerekçe: tasarımda sol 1176, 997×731 (120rem çerçevede). */
.site-footer__pattern {
    position: absolute;
    top: 0;
    left: 61.25vw;    /* 1176 / 1920 */
    width: 51.927vw;  /* 997 / 1920  */
    /* Tasarımda 38.073vw (731/1920); alt bilgiyi tam doldursun diye 40vw'ye
       çıkarıldı — desen ~%5 dikey geriliyor ve alt ~37px kırpılıyor. */
    height: 40vw;
    max-width: none;
    pointer-events: none;
}

/* Alt bilgi bloğu 16.875rem'ten başlar (270 → 1550); sağ sütun 59.9375rem'e denk gelir. */
.site-footer__inner {
    --shell: 80rem;
    position: relative;
    z-index: 1;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 43.0625rem 1fr;
    grid-template-areas:
        'brand links'
        'bar   bar';
}

/* --- sol blok --- */

.site-footer__brand { grid-area: brand; }

.site-footer__word { display: block; width: 21.1875rem; height: 2.9375rem; margin-left: 0.25rem; }
.site-footer__tag  { display: block; width: 17.6875rem; height: 0.75rem; margin: 1rem 0 0 1.85187rem; }

.site-footer__title {
    margin-top: 4.3125rem;
    font-size: 2rem;
    line-height: 1.34;
    letter-spacing: 0.2rem;
    color: #fff;
}

/* Tasarımda kutu 29.4375rem ve metin 3 satır. Chromium Space Grotesk Light'ı
   Figma'dan ~%1.5 geniş çiziyor, 2. satır 478px'e çıkıp 471'lik kutuya
   sığmıyor ve blok 4 satıra düşüyordu. Kutu 13px genişletildi (689px'lik
   sütunda görünmez) — tasarımdaki 3 satırlık sarma geri geldi. */
.site-footer__text {
    margin-top: 1.3125rem;
    width: 30.25rem;
    max-width: 100%;
    font-size: var(--fs-13);
    font-weight: 300;
    line-height: 1.308;
    letter-spacing: 0.1em;
    color: var(--grey-3);
}

/* --- sağ blok --- */

.site-footer__links {
    grid-area: links;
    position: relative;
    margin-top: 3.5625rem;
}
.site-footer__links li + li { margin-top: 1.1875rem; }

/* Yalnızca liste bağlantıları: kapsayıcıdaki rozeti (.site-footer__disc) etkilemesin. */
.site-footer__links ul a {
    display: flex;
    align-items: center;
    gap: 1.1875rem;
    text-decoration: none;
}
.site-footer__links ul a img {
    width: 3.1875rem;
    height: 3.1875rem;
    flex: none;
    transition: transform .3s ease;
}
.site-footer__links ul a:hover img { transform: translateX(0.25rem); }

.site-footer__label {
    display: block;
    font-size: var(--fs-13);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--grey-2);
}
.site-footer__file {
    display: block;
    margin-top: 0.4375rem;
    font-size: var(--fs-13);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #fff;
}

/*
   Tasarımda (58:44) 8.3125rem; müşteri isteğiyle büyütüldü. Tek değişken:
   --size. Merkez sabit kalsın diye konum farkın yarısı kadar geri alınıyor,
   böylece rozet sağa taşıp kapsayıcıyı aşmıyor. İç ok yüzde tabanlı
   olduğu için kendiliğinden ölçekleniyor.
*/
.site-footer__disc {
    --gx: 33.81%; --gy: 30.47%; --gw: 32.38%; --gh: 39.52%;
    --lw: 122.06%; --lh: 81.93%; --lr: -90deg;
    --size: 10.5rem;

    position: absolute;
    top: calc(-1.0625rem - (var(--size) - 8.3125rem) / 2);
    left: calc(28.375rem - (var(--size) - 8.3125rem) / 2);
    width: var(--size);
    height: var(--size);
}

/* --- alt şerit --- */

.site-footer__bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 14rem;
    font-size: var(--fs-13);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #fff;
}
.site-footer__bar > div { display: flex; align-items: center; }

.social--footer { gap: 2.125rem; }

.site-footer__handle { margin-left: 3.375rem; }
.site-footer__meta span { color: var(--grey-4); }
.site-footer__meta + .site-footer__meta { margin-left: 4.875rem; }

/* =========================================================================
   KURUMSAL sayfası (Figma 42:197)
   ========================================================================= */

/* --- iç sayfa başlığı (1920×763) --- */

.hero--page { min-height: 47.6875rem; }

/* Slogan tasarımda 692,593 — logo kilidinin 5.375rem altında ve ortalı. */
.hero__slogan {
    margin: 5.375rem 0 0;
    font-family: var(--font-alt);
    font-size: 3.125rem;
    font-weight: 300;
    line-height: 1.16;
    text-align: center;
    color: var(--sage);
}
.hero__slogan strong { font-weight: 600; }

/* --- Hakkımızda --- */

/*
   Sahne, tasarımdaki PHOTO 1 kutusudur (2208×1242, sayfada -579,730). Kutunun
   kendisi görünmez; içindeki iki katmanı birbirine kilitler. Ölçüler vw
   cinsinden: bu katman tam genişlikte bir dekor ve dar ekranda rem gibi
   1440'ta donarsa yatay taşma yapıyor.
*/
.about {
    position: relative;
    min-height: 62.969vw;
}

.about__stage {
    position: absolute;
    top: -2.0625rem;
    left: -30.15625vw;
    width: 115vw;
    aspect-ratio: 2208 / 1242;
    pointer-events: none;
}
.about__stage img { position: absolute; display: block; }

/* Pist fotoğrafı camın arkasında; konum sahne kutusunun yüzdesi olarak. */
.about__photo {
    left: 29.3025%;
    top: 21.9807%;
    width: 42.8895%;
    height: 52.657%;
    object-fit: cover;
}
.about__frame { inset: 0; width: 100%; height: 100%; }

/* Metin sütunu tasarımda 1030'dan başlar (1030 → 1737). */
.about__inner {
    position: relative;
    z-index: 1;
    width: 44.1875rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
    padding-top: 12.125rem;
}

.about__title {
    margin: 0;
    font-family: var(--font-alt);
    font-size: 5.625rem;
    font-weight: 600;
    line-height: 1.156;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.about__title span { font-weight: 300; }

.about__body {
    margin-top: 1.75rem;
    font-size: var(--fs-20);
    font-weight: 400;
    /* Tasarımda satır adımı 34px (20px yazı) — ölçülerek alındı. Paragraf
       arası tam bir boş satır. */
    line-height: 1.7;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.about__body p { margin: 0; }
.about__body p + p { margin-top: 1.7em; }
.about__body a { color: inherit; text-underline-offset: 0.25em; }
.about__body a:hover { text-decoration-thickness: 0.125em; }

/* --- Hakkımızda gövdesindeki liste ve kapanış --- */

/* Giriş cümlesi ile liste, listeyle kapanış cümlesi aynı cümlenin parçası:
   aralarında paragraf boşluğu değil, tek satır boşluk var. */
.about__body .about__lead + .about__list { margin-top: 0.5em; }
.about__body .about__list + .about__tail { margin-top: 0.5em; }

.about__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about__list li {
    position: relative;
    padding-left: 1.45em;
}
.about__list li + li { margin-top: 0.35em; }
.about__list li::before {
    content: "";
    position: absolute;
    left: 0.4em;
    /* satır kutusunun ortası: (1.7em - 0.3em) / 2 */
    top: 0.7em;
    width: 0.3em;
    height: 0.3em;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

/* Kapanış satırı imza gibi durur; gövdeden bir tık daha belirgin. */
.about__slogan { font-weight: 500; }

/* --- çizgi–ifade–çizgi --- */

.creed { padding-top: 2rem; }
.creed__statement { margin: 6.125rem 0 0; }
.creed__rule-2 { margin-top: 6rem; }

/* Bu sayfada ifade bloğundan sonra makale bölümü yok; pist görseli
   tasarımdaki 3074/3870 konumuna bu boşluklarla oturuyor. */
.creed + .feature { padding-top: 12rem; padding-bottom: 19.4375rem; }

/* =========================================================================
   ÜRÜNLERİMİZ iç sayfası (Figma 59:164)
   ========================================================================= */

/* Tasarımda sütun bloğu 421'den başlar (421 → 1419), sayfa merkezinden 40px
   solda. .gallery__inner de aynı sol kenarı paylaşır. */
.product,
.gallery { position: relative; }

/*
   Sağ sütunun satırları Figma'da elle kırılmış (sol sütun otomatik sarıyor),
   bu yüzden doğal sarmayla blok ~148px kısa kalıyor. Satırları <br> ile
   sabitlemek uyarlanabilirliği bozardı; bunun yerine bölüm tasarımdaki
   yüksekliğe (763 → 2435) sabitleniyor, böylece altındaki bölümler
   tasarımdaki yerlerine oturuyor. min-height: metin uzarsa bölüm büyür.
*/
.product { min-height: 104.5rem; }

/* Sütun bloğu 421 → 1419 (998), galeri aynı sol kenardan 421 → 1501 (1080). */
.product__inner,
.gallery__inner {
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
}
.product__inner { width: 62.375rem; }
.gallery__inner { width: 67.5rem; }

.product__inner {
    display: grid;
    grid-template-columns: 30.375rem 28.3125rem;
    column-gap: 3.6875rem;
    align-items: start;
}

.product__main  { padding-top: 4.4375rem; }
.product__aside { padding-top: 6.1875rem; }

.product__photo {
    display: block;
    width: 28.0625rem;
    height: 28.0625rem;
    max-width: 100%;
    border-radius: 1.9375rem;
    object-fit: cover;
}

.product__main .product__text { margin-top: 2.5625rem; }

/* Tasarımda satır adımı 31px (18px yazı); paragraf arası sol sütunda bir,
   sağ sütunda iki boş satır. */
.product__text {
    --gap: 1.9375rem;
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.722;
    letter-spacing: 0.1em;
    color: var(--sage);
}
.product__aside { --gap: 3.875rem; }

.product__text p { margin: 0; }
.product__text p + p { margin-top: var(--gap); }

/* Rozet sütunların dışında, sağ üstte; kutu etiketi ortalayacak genişlikte. */
/* margin sıfırlanmalı: .brochure manifestodaki yerleşim için margin-left
   taşıyor, mutlak konumda bu left'in üstüne eklenip rozeti 62px kaydırıyor. */
.product__brochure {
    position: absolute;
    top: -0.3125rem;
    /* Tasarımda 24rem (kutu 1344'ten başlar); müşteri isteğiyle 9rem sağa
       alındı — kutu 1488 → 1666. Mühür ve etiket birlikte kayar, ortalamaları
       bozulmaz. Sütunu (…1419) kesmediği için metni etrafından akıtan
       .product__cutout float'ına gerek kalmadı; rozet 28.6875rem'in soluna
       çekilirse o boşluk geri gelmeli. */
    left: calc(50% + 33rem);
    margin: 0;
    z-index: 2;
}
.brochure--wide { width: max(11rem, 176px); }
.brochure--wide .brochure__seal { margin-inline: auto; }
.brochure--wide .brochure__label { text-align: center; }

/* --- galeri --- */

.gallery { padding-top: 11.0625rem; }
/* Poster üstündeki 70px dolgu olarak veriliyor: kenar boşluğu olsaydı
   kapsayıcıyla çöküp mutlak konumlu rozeti de aşağı kaydırıyordu. */
.gallery__inner { position: relative; padding-top: 4.375rem; }
.gallery__disc { position: absolute; top: 0; left: 4.375rem; z-index: 2; width: 8rem; height: 8rem; }

.gallery__stage {
    position: relative;
    aspect-ratio: 1080 / 607;
    border-radius: 0.125rem;
    overflow: hidden;
}

.gallery__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
}
.gallery__slide.is-active { opacity: 1; visibility: visible; }
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery__play,
.gallery__nav {
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.gallery__play {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .25s ease;
}
.gallery__play img { width: 4.75rem; height: 4.8125rem; }
.gallery__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.gallery__nav { top: 50%; transform: translateY(-50%); width: 3.0625rem; height: 3.0625rem; }
.gallery__nav img { display: block; width: 3.0625rem; height: 3.0625rem; }
.gallery__nav--prev { left: 1.6875rem; }
.gallery__nav--next { right: 1.75rem; }

/* Geri düğmesi tasarımda halka + ok olarak iki katman; ok 180° döndürülmüş. */
.gallery__nav--prev .gallery__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.75rem;
    height: 1.5625rem;
    transform: translate(-50%, -50%) rotate(180deg);
}

.gallery__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.375rem;
}
/* Noktalar düz biçim: tasarımdaki dolgu renkleriyle CSS'te üretiliyor
   (ince çizgilerde olduğu gibi). */
.gallery__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    padding: 0;
    border: 0;
    border-radius: 0.21875rem;
    background: #3a4241;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.gallery__dot.is-active { width: 1.75rem; background: #dcefe4; }

/* --- en son makaleler --- */

/* Kartların altında koyu bandın alt bilgiye kadar süren 350px'lik boşluğu. */
.latest { padding-top: 10.0625rem; padding-bottom: 21.875rem; }

.latest__head {
    width: 55.8125rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.latest__title {
    margin: 0;
    font-family: var(--font-alt);
    font-size: 3.125rem;
    font-weight: 300;
    line-height: 1.16;
    color: var(--sage);
}
.latest__all { margin: 1.875rem 0 0; }

.link-alt {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-alt);
    font-size: var(--fs-15);
    font-weight: 500;
    color: var(--sage);
    text-decoration: none;
}
.link-alt img { flex: none; width: 1.0625rem; height: 0.875rem; transition: transform .3s ease; }
.link-alt:hover img { transform: translateX(0.3125rem); }

/* Kart ızgarası ÜRÜNLERİMİZ ve BLOG'da ortak: iki sütun, 15px ara.
   Satır arası tasarımda 17 ve 24px; blok sınırları (786 → 1505) korunsun
   diye ikisinin ortası kullanıldı. */
.post-grid {
    width: 74.4375rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.9375rem;
    row-gap: 1.28125rem;
}
.latest .post-grid { margin-top: 4.25rem; }

/* Kart 588×226, görsel 225 geniş; metin sütunu tasarımdaki 250/39.6 iç
   boşluklarıyla. */
/* min-height (height değil): yazı tabana oturduğu için dar ekranda içerik
   tasarımdaki 226px'e sığmıyor, kart büyüsün — yoksa overflow:hidden kırpar. */
.post-card {
    display: grid;
    grid-template-columns: 14.0625rem 1fr;
    min-height: max(14.125rem, 226px);
    border-radius: 0.6875rem;
    background: var(--panel);
    overflow: hidden;
    text-decoration: none;
    transition: background-color .25s ease;
}
.post-card:hover { background: #414850; }

.post-card__thumb { overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }

.post-card__body {
    display: flex;
    flex-direction: column;
    padding: 1.875rem 2.4375rem 1.875rem 1.5625rem;
}

.post-card__title {
    display: block;
    font-family: var(--font-alt);
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.55;
    color: var(--sage);
}
.post-card__title span { display: block; }

.post-card__lead {
    display: block;
    margin-top: 0.625rem;
    font-family: var(--font-alt);
    font-size: var(--fs-12);
    font-weight: 300;
    line-height: 1.833;
    color: var(--sage);
}

.post-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    font-family: var(--font-alt);
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--sage);
}
.post-card__more { display: inline-flex; align-items: center; gap: 0.625rem; }
.post-card__more img { flex: none; width: 1.0625rem; height: 0.875rem; transition: transform .3s ease; }
.post-card:hover .post-card__more img { transform: translateX(0.3125rem); }

/* =========================================================================
   BLOG (Figma 59:318)
   ========================================================================= */

/* Bu sayfada logo kilidi yok; başlık 279'dan başlıyor (diğer iç sayfalarda
   kilit 317'den). */
.hero--blog .hero__inner { padding-top: 17.4375rem; }

.hero-heading {
    margin: 0;
    font-family: var(--font-alt);
    font-weight: 300;
    line-height: 1.16;
    text-align: center;
    color: var(--sage);
}
.hero-heading__line { display: block; font-size: 3.125rem; }
.hero-heading__lead { display: block; font-size: 4.375rem; font-weight: 600; }
/* Tasarımda 8px boşluk yalnızca ikinci ve üçüncü satır arasında. */
.hero-heading__lead + .hero-heading__line { margin-top: 0.5rem; }

/* Kartlar koyu bandın 23px altından başlar, 190px üstünde biter. */
.posts { padding-block: 1.4375rem 11.875rem; }

/* =========================================================================
   İLETİŞİM (Figma 59:517)
   ========================================================================= */

/* Başlık BLOG'da 279'dan, burada 310'dan başlıyor. */
.hero--contact .hero__inner { padding-top: 19.375rem; }

/* Blok 325 → 1503; metin sütunu 619, form 488, aralarında 71px. */
.contact { padding-block: 12.1875rem 12.4375rem; }

.contact__inner {
    position: relative;
    width: 73.625rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 38.6875rem 30.5rem;
    column-gap: 4.4375rem;
    align-items: start;
}

/* Dikey ayraç (61:108) düz kontur — ince çizgilerde olduğu gibi CSS'te. */
.contact__rule {
    position: absolute;
    top: 0;
    left: 39.3125rem;
    width: 0.125rem;
    height: 33.8125rem;
    background: var(--sage);
}

.contact__intro {
    margin-top: 0.125rem;
    font-size: var(--fs-15);
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: var(--sage);
}
/* Tasarımda paragraf arası iki boş satır. */
.contact__intro p + p { margin-top: 3.375rem; }

/* --- form --- */

.contact-form { display: flex; flex-direction: column; }
.field + .field { margin-top: 1.1875rem; }

.field__label {
    display: block;
    margin-bottom: 0.5625rem;
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: 1.267;
    color: var(--sage);
}

.field__box {
    display: flex;
    align-items: center;
    height: max(2.9375rem, 47px);
    border: 1px solid var(--sage);
    border-radius: 0.375rem;
}

.field__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 1.3125rem;
    border: 0;
    background: none;
    color: var(--sage);
    font-family: inherit;
    font-size: var(--fs-15);
}
.field__input::placeholder { color: var(--field-hint); opacity: 1; }
.field__input:focus { outline: 0; }
.field__box:focus-within { border-color: #d3e2d9; }

.field__hint {
    flex: none;
    padding-right: 1.1875rem;
    font-size: var(--fs-10);
    color: var(--field-hint);
}

/* --- telefon satırı --- */

.field__row { display: flex; gap: 1.3125rem; }
/* Tasarımda bu kutu boş çizilmiş (içerik kararlaştırılmamış). İşlevsel
   karşılığı ülke seçicisi; tarayıcının kendi oku yerine tasarımın diline
   uyan küçük bir CSS oku kullanılıyor. */
.field__box--code {
    position: relative;
    width: max(5.0625rem, 81px);
    flex: none;
}
.field__box--code::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.375rem;
    height: 0.375rem;
    border-right: 1px solid var(--sage);
    border-bottom: 1px solid var(--sage);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.field__box--phone { flex: 1; min-width: 0; align-items: stretch; }

.field__select {
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem 0 1.3125rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    color: var(--sage);
    font-family: inherit;
    font-size: var(--fs-15);
    cursor: pointer;
}
.field__select:focus { outline: 0; }
.field__select option { color: var(--ink); }

/* Alan kodu, tasarımdaki 1px'lik iç çizgiyle (61:119) numaradan ayrılır. */
.field__dial {
    flex: none;
    display: flex;
    align-items: center;
    width: max(4.75rem, 76px);
    padding-left: 1.3125rem;
    border-right: 1px solid var(--sage);
    font-size: var(--fs-15);
    color: var(--sage);
}
.field__box--phone .field__input { padding-left: 1.375rem; }
.field__box--phone .field__hint { align-self: center; }

/* --- mesaj alanı --- */

.field__box--area { height: max(10.8125rem, 173px); align-items: stretch; }
.field__input--area {
    padding: 0.875rem 1.3125rem;
    line-height: 1.6;
    resize: vertical;
}

/* --- gönder --- */

.form-send {
    align-self: flex-end;
    margin-top: 1.25rem;
    width: max(12.6875rem, 203px);
    height: max(2.0625rem, 33px);
    border: 0;
    border-radius: max(1.03125rem, 16.5px);
    background: var(--send);
    color: var(--send-ink);
    font-size: var(--fs-15);
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.form-send:hover { background: #d3e2d9; transform: translateY(-0.0625rem); }

/* =========================================================================
   Dokunmatik: hedef büyütme
   -------------------------------------------------------------------------
   Simge denetimleri tasarımda 14–20px; parmakla vurulamayacak kadar küçük.
   Dolgu + eşit negatif kenar boşluğu ile tıklama alanı ~44px'e çıkarılıyor,
   kutunun kapladığı yer değişmiyor — yani yerleşim aynı kalıyor.
   ========================================================================= */

@media (max-width: 1100px) {
    /* px tabanı şart: 1440'ın altında kök 12px'e sabitlendiği için salt rem
       dolgu ~21px'te kalıyor ve hedef 44'e ulaşmıyor. */
    .menu-toggle { padding-block: max(0.875rem, 14px); margin-block: max(-0.875rem, -14px); }
    /* En dar simge 7px (Facebook); yatayda daha çok dolgu gerekiyor. */
    .social a    { padding: max(0.875rem, 14px) max(1.125rem, 18px);
                   margin: max(-0.875rem, -14px) max(-1.125rem, -18px); }
    .lang a      { padding: max(0.875rem, 14px) max(0.5rem, 8px);
                   margin: max(-0.875rem, -14px) max(-0.5rem, -8px); }
    .link-alt, .link-arrow { padding-block: max(0.75rem, 12px); margin-block: max(-0.75rem, -12px); }
    /* Menüdeki ana gezinme maddeleri satır kutusu kadar (26–30px) kalıyordu. */
    .site-menu__link { padding-block: 9px; margin-block: -9px; }

    .gallery__nav    { width: max(3.0625rem, 44px); height: max(3.0625rem, 44px); }
    .gallery__nav img { width: 100%; height: 100%; }
    .gallery__play img { width: max(4.75rem, 44px); height: auto; }

    /* Nokta görünürde 7px kalır, vurma alanı görünmez şekilde büyür. */
    .gallery__dot { position: relative; }
    .gallery__dot::after { content: ''; position: absolute; inset: -1.125rem -0.5rem; }

    .pill, .form-send { height: max(2.0625rem, 44px); border-radius: max(1.03125rem, 22px); }

    /* iOS, 16px'ten küçük yazılı bir alana odaklanınca sayfayı yakınlaştırır. */
    .field__input, .field__select { font-size: max(var(--fs-15), 16px); }
}

/* =========================================================================
   Uyarlanabilir yerleşim
   ========================================================================= */

@media (max-width: 1440px) {
    .scroll-cue { display: none; }
}

@media (max-width: 1330px) {
    .site-footer__pattern { display: none; }
    .site-footer__inner { grid-template-columns: 1fr auto; }
    .site-footer__links { display: flex; align-items: flex-start; gap: 2.5rem; }
    /* static DEĞİL: rozet, içindeki mutlak konumlu ok için kapsayıcı kalmalı. */
    .site-footer__disc { position: relative; top: auto; left: auto; }
}

@media (max-width: 1280px) {
    /* Broşür rozeti sütunların sağına sığmıyor: akışa alınıp sütunların
       üstüne, sağa yaslı konur. */
    .product { min-height: 0; }
    .product__brochure {
        position: static;
        display: block;
        width: max(11rem, 176px);
        margin: 0 0 2.5rem auto;
    }

    /* Metin sütunu artık pencerenin sağına sığmıyor: görsel akışa alınıp
       metnin üstüne konur, sahne tam genişliğe oturur. */
    .about { min-height: 0; }
    .about__stage {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }
    .about__inner { padding-top: 4.5rem; }
    .about__title { font-size: 4.5rem; }

    .hero__brief { gap: 1.75rem; }
    .promo-card { flex: 0 0 26.25rem; }

    .manifesto__cols { flex-wrap: wrap; row-gap: 4rem; }
    .manifesto__lede { width: 44%; }
    .manifesto__body { width: 44%; margin-left: 6%; }
    /*
       Manifesto broşürü bu genişlikten itibaren sütunların altında tek başına
       bir satırda kalıyor; ortalanır. display: block şart — 900px altında
       .manifesto__cols block olduğu için <a> satır içi kalıyor ve 116px
       genişliği hiç uygulanmıyordu.

       :not(--wide) de şart: aynı blokta .product__brochure'ün margin-left:auto'su
       bu kuraldan önce geliyor, sınırlanmazsa onu ezip rozeti sola yaslıyor.
    */
    .brochure:not(.brochure--wide) {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .priorities__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    .priorities__title { margin-left: 0; text-align: center; }
    .priority__media { height: auto; aspect-ratio: 355 / 500; }
}

@media (max-width: 1100px) {
    .hero--page { min-height: 0; padding-bottom: 5rem; }
    .hero__slogan { font-size: 2.25rem; }
    .about__title { font-size: 3.5rem; }
    .creed + .feature { padding-top: 8rem; padding-bottom: 10rem; }

    .hero--blog .hero__inner,
    .hero--contact .hero__inner { padding-top: 13.125rem; }
    .hero-heading__line { font-size: 2.25rem; }
    .hero-heading__lead { font-size: 3.125rem; }
    .posts { padding-block: 3rem 6rem; }

    /* Metin ve form alt alta; ayraç ikisini artık ayırmıyor. */
    .contact { padding-block: 5rem 6rem; }
    .contact__inner { grid-template-columns: minmax(0, 1fr); row-gap: 3.5rem; }
    .contact__rule { display: none; }
    .contact__intro { margin-top: 0; }

    /* Ürün sütunları alt alta; görsel sütun genişliğine yayılır. */
    .product__inner { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
    .product__main, .product__aside { padding-top: 0; }
    .product__photo { width: 100%; height: auto; aspect-ratio: 1; }
    .product__aside { --gap: 1.9375rem; }
    .gallery { padding-top: 6rem; }
    .latest { padding-top: 6rem; padding-bottom: 8rem; }
    .latest__title { font-size: 2.5rem; }

    .statement { font-size: 2.5rem; line-height: 3.25rem; letter-spacing: 0.21875rem; }
    .showcase__title { font-size: 2.5rem; line-height: 3.375rem; }
    .priorities__title { font-size: 2.75rem; line-height: 3.75rem; letter-spacing: 0.25rem; }

    .hero__brief { flex-wrap: wrap; }
    .promo-card { flex: 0 0 100%; max-width: 29.6875rem; }
    .hero__brief-text:nth-of-type(1),
    .hero__brief-text:nth-of-type(2) { flex: 1 1 16.25rem; }

    .articles__grid { grid-template-columns: 1fr; }
    .article-card { height: auto; min-height: 12.75rem; }
}

@media (max-width: 1100px) {
    .site-menu__pattern { display: none; }
}

@media (max-width: 900px) {
    .lb { display: none; }

    .site-menu__inner { padding-top: 2.5rem; }
    .site-menu__nav { margin-top: 5.625rem; }
    .site-menu__link { font-size: 1.875rem; line-height: 2.5rem; letter-spacing: 0.1875rem; }
    /* Dokunma hedefleri 44px'e çıkınca komşu maddelerin alanları çakışmasın. */
    .site-menu__nav > ul > li + li { margin-top: 1.75rem; }
    .site-menu__social { gap: 2.75rem; margin-top: 2.5rem; padding-bottom: 3rem; }
    .site-menu__mail { margin-top: 2.25rem; }

    .site-header { padding-top: 2.5rem; }
    .site-header__side { gap: 1.75rem; }
    .site-header__side--end { gap: 1.75rem; }
    .social { gap: 1.375rem; }
    .site-header__brand img { width: 6.5rem; height: 4.75rem; }

    /* Yalnızca ana sayfa hero'su tam ekran; iç sayfalarda başlık altında
       gereksiz boşluk kalmasın (bkz. .hero--page, 1100px kuralı). */
    .hero:not(.hero--page) { min-height: 100svh; }
    .hero__inner { padding-top: 13.125rem; }
    .hero__actions { flex-wrap: wrap; margin-top: 2.75rem; }
    .hero__foot { padding-bottom: 4.5rem; }
    .hero__about { padding-right: 0; }

    .showcase__inner { min-height: 48.75rem; padding-top: 13.125rem; }
    .showcase__title, .showcase__link { margin-left: 0; }
    .showcase__disc { position: relative; top: auto; right: auto; margin: 3.5rem 0 0 auto; }

    .manifesto__rule-1 { margin-top: 0; }
    .manifesto__cols { margin-top: 3.5rem; display: block; }
    .manifesto__lede, .manifesto__body { width: 100%; margin: 0 0 2.5rem; }
    .manifesto__statement, .manifesto__rule-2 { margin-top: 3.5rem; }

    .feature { padding-top: 6rem; }
    .feature__inner { padding-top: 3.75rem; }
    .feature__disc { left: var(--gutter); width: 7.5rem; height: 7.5rem; }

    .articles { padding-top: 5.5rem; }
    .articles__head { flex-direction: column; align-items: flex-start; gap: 0.875rem; }

    .priorities { padding-top: 6rem; background: var(--ink); }
    .priorities__grid { grid-template-columns: 1fr; gap: 3.5rem; margin-top: 2.5rem; }
    .priority { margin-top: 0; }
    .priority__media { aspect-ratio: 16 / 11; }
    .priority__title { color: var(--sage); }
    .priority__body { color: var(--sage); }

    .closing { padding-block: 1.25rem 3rem; }

    .site-footer { padding-top: 5rem; }
    .site-footer__inner {
        grid-template-columns: 1fr;
        grid-template-areas: 'brand' 'links' 'bar';
        row-gap: 3.5rem;
    }
    .site-footer__links { margin-top: 0; flex-direction: column; }
    .site-footer__disc { margin: 2.5rem 0 0; }
    .site-footer__word { width: 16.25rem; height: auto; margin-left: 0; }
    .site-footer__tag { width: 13.625rem; height: auto; margin-left: 0; }
    .site-footer__bar {
        margin-top: 0;
        flex-wrap: wrap;
        row-gap: 1.125rem;
        justify-content: flex-start;
    }
    .site-footer__meta + .site-footer__meta { margin-left: 2rem; }
}

@media (max-width: 620px) {
    :root { --gutter: 1.25rem; }

    .site-menu__nav { padding-right: 0; }
    .site-menu__link { font-size: 1.5rem; line-height: 2.125rem; letter-spacing: 0.15rem; }
    .site-menu__mail { letter-spacing: 0.1rem; line-height: 1.7; }
    .site-menu__mail a { letter-spacing: 0.125rem; }
    .site-menu__social { gap: 1.75rem; }
    /* Panel rem tabanlı olduğu için telefonda 183px'e iniyor ve kategoriler
       beş satıra bölünüyordu; ekranda yer varken px ile genişletiliyor. */
    .menu-sub { width: min(260px, calc(100vw - 2.5rem)); }

    .hero__slogan { font-size: 1.75rem; margin-top: 3rem; }
    .about__title { font-size: 2.75rem; letter-spacing: 0.06em; }
    .creed + .feature { padding-top: 6rem; padding-bottom: 6rem; }

    .latest__title { font-size: 2rem; }
    .hero-heading__line { font-size: 1.75rem; }
    .hero-heading__lead { font-size: 2.25rem; }
    .latest__head { flex-wrap: wrap; gap: 1rem; }
    .latest__all { margin-top: 0; }
    /* Kart tek sütun; katmanlar akışa döndüğü için sabit yükseklik kalkar. */
    .post-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .post-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .post-card__thumb { display: block; height: 8.75rem; }
    /* Genişlik/yükseklik dokunmatik bloğunda 44px tabanına oturuyor;
       burada yalnızca kenar boşlukları daraltılır. */
    .gallery__nav--prev { left: 0.75rem; }
    .gallery__nav--next { right: 0.75rem; }
    .gallery__play img { width: max(3.5rem, 44px); height: auto; }

    .statement { font-size: 1.75rem; line-height: 2.375rem; letter-spacing: 0.125rem; }
    .showcase__title { font-size: 2rem; line-height: 2.625rem; letter-spacing: 0.1875rem; }
    .priorities__title { font-size: 2rem; line-height: 2.75rem; letter-spacing: 0.1875rem; }
    .priority__title { font-size: 1.875rem; letter-spacing: 0.15625rem; }
    .site-footer__title { font-size: 1.5rem; letter-spacing: 0.15rem; }

    /* Telefonda üst bar dört parçayı sığdıramıyor — hamburger ekran dışına
       taşıp kırpılıyordu. Geriye logo + MENÜ kalır; "Teklif Al"ın karşılığı
       menüdeki İLETİŞİM maddesi (teklif formunun olduğu sayfa). Dil değiştirici
       zaten bağlanmamış bir taslak; i18n gelince menü gövdesine konmalı. */
    .site-header__side .social,
    .site-header__row .pill,
    .site-header__row .lang { display: none; }
    .site-header__row { gap: 0.75rem; }

    .hero__inner { padding-top: 11.25rem; }
    .hero__actions .pill--wide { width: 100%; }
    .promo-card { display: block; height: auto; }
    .promo-card__thumb { display: block; width: 100%; height: 8.75rem; }
    .promo-card__text { padding: 1.125rem 1.125rem 1.25rem; }

    /* Katmanlar akışa döndüğü için sabit yükseklik içeriği kırpıyordu. */
    .article-card { height: auto; }
    /* display: block şart — <span> satır içi kalırsa yükseklik uygulanmaz,
       görsel kartı taşırıp kırpılıyordu. */
    .article-card__thumb { position: static; display: block; width: 100%; height: 8.75rem; }
    .article-card__art, .article-card__arrow { position: static; margin: 1.125rem; }
    .article-card__art { width: calc(100% - 2.25rem); height: auto; }
    .article-card__arrow { display: none; }

    .site-footer__links a { gap: 0.875rem; }
    .site-footer__disc { --size: 7.5rem; }

    /* 1fr'in alt sınırı min-content: 30.25rem'lik metin bloğu ızgara rayını
       363px'te tutuyor, alt bilgi 378px kalıp sağdan kırpılıyordu. */
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
    .site-footer__text  { width: auto; }

    /* Alt şerit telefonda tek satıra sığmıyor. */
    .site-footer__bar { flex-wrap: wrap; gap: 1.25rem; margin-top: 4rem; }
    .site-footer__meta + .site-footer__meta { margin-left: 1.5rem; }
    .site-footer__handle { margin-left: 1.25rem; }

    /*
       Telefonda alt bilgi tek sütuna indiği için tasarımın sola hizalı
       kompozisyonu yarım kalıyordu: blok ortada, içerik solda. Tüm alt bilgi
       ortalanır — marka bloğu, bağlantı satırları, dönen rozet ve alt şerit.
    */
    .site-footer__brand { text-align: center; }
    .site-footer__word,
    .site-footer__tag,
    .site-footer__text { margin-inline: auto; }

    /* Liste bir blok olarak ortalanır; satırlar kendi içinde sola hizalı
       kalır, böylece simgeler aynı sütunda durur. (Kapsayıcı 1330px altında
       align-items: flex-start alıyor, listeyi sola yaslıyordu.) */
    .site-footer__links { align-items: center; }
    .site-footer__links ul a { text-align: left; }

    .site-footer__disc { margin-inline: auto; }

    .site-footer__bar { justify-content: center; }
    .site-footer__bar > div { justify-content: center; }
}

/* Tasarimdaki asimetrik hizalar yalnizca olcegin 1'e yakin oldugu
   genisliklerde uygulanir; dar ekranda kapsayicilar ortalanir (tasmayi onler). */
@media (min-width: 1441px) {
    .site-header__row { margin-left: calc(50% - 38.5625rem); margin-right: auto; }
    .hero__foot { margin-left: calc(50% - 37.9375rem); margin-right: auto; }
    .manifesto__cols { margin-left: calc(50% - 35.0625rem); margin-right: auto; }
    .site-footer__inner { margin-left: calc(50% - 44.625rem); margin-right: auto; }
    /* KURUMSAL metin sütunu tasarımda 1030'dan başlar (merkez + 4.375rem). */
    .about__inner { margin-left: calc(50% + 4.375rem); margin-right: auto; }
    /* İLETİŞİM bloğu 325'ten (merkez − 39.6875rem). */
    .contact__inner { margin-left: calc(50% - 39.6875rem); margin-right: auto; }
    /* ÜRÜNLERİMİZ sütunları ve galeri 421'den (merkez − 33.6875rem). */
    .product__inner,
    .gallery__inner { margin-left: calc(50% - 33.6875rem); margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .disc__ring { animation: none; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}