/*!
 * DGR Web — Ortam katmanı, nesne kitaplığı, hızlı iletişim, içindekiler çubuğu (core, v9)
 * Dosyalar: assets/css/front/ambient.css, assets/js/front/ambient.js,
 *           partials/ambient.php (katman), ambient-obj.php (tek nesne — ortak kitaplık), ambient-head.php (sayfa başı nesneleri),
 *           speed-dial.php + quick-links.php (hızlı iletişim); içindekiler çubuğunu ambient.js kurar.
 *
 * 1) .amb — düz sıcak krem zemin + net nokta/ızgara deseni + KENAR BOŞLUKLARINDA stüdyo nesneleri (≥ 1280 px).
 *    Işık lekesi, blur, buzlu cam YOK. Nesneler yalnızca içerik sütununun dışındaki boşlukta durur, birbirine ve metne binmez
 *    (ambient.js her sütunu ölçüp eşit aralıkla dizer, genişliğe göre ölçekler).
 * 2) .dial — sağ altta "Hızlı iletişim" (WhatsApp'tan yaz · Instagram · Ara · Forma git).
 * 3) .toc — menünün altında kaydırınca beliren bölüm içindekiler çubuğu.
 * 4) .amb-o--* — ortak nesne kitaplığı (partials/ambient-obj.php).
 * 5) Bölüm yardımcıları: .sec-tint · .sec-cream · .sec-ink · .sec-deco, .amb-float, sayfa başı nesneleri.
 * Hareket kapalı / azaltılmışken her şey yerinde, statik ama dolu.
 */

:root {
    /* Sıcak krem zemin tonları (markanın turuncusundan türetilir) */
    --cream: color-mix(in oklab, var(--brand) 3%, #fdf9f4);
    --cream-2: color-mix(in oklab, var(--brand) 5%, #fbf4ec);
    --note: color-mix(in oklab, var(--brand) 14%, #fff4dc);
    --wa: #128c4a;
    /* Nesnelerin ortak keskin ince gölgesi (bulanık hale yok) */
    --amb-sh: 0 1px 0 rgb(20 20 20 / 0.06), 0 6px 8px -6px rgb(20 20 20 / 0.32), 0 0 0 1px rgb(20 20 20 / 0.07);
}

/* ==========================================================================
   1) Zemin + kenar nesneleri
   ========================================================================== */

.amb {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--cream);
    contain: strict;
}

/* Net, ince nokta deseni + seyrek ızgara; kenarlarda belirgin, ortada (metnin arkasında) sakin */
.amb__pattern {
    position: absolute;
    inset: -96px 0;
    background:
        radial-gradient(circle, rgb(20 20 20 / 0.12) 1px, transparent 1.4px) 0 0 / 24px 24px,
        linear-gradient(to right, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
        linear-gradient(to bottom, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px) 0 0 / 96px 96px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.4) 26%, rgb(0 0 0 / 0.4) 74%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.4) 26%, rgb(0 0 0 / 0.4) 74%, #000 100%);
}

.amb__objs {
    position: absolute;
    inset: 0;
}

/* Kenar sütunları: yalnızca geniş ekranda; JS konumu ve ölçeği hesaplar (aşağıdakiler JS gelmezse yedek) */
.amb__objs .amb-o {
    top: 0;
    display: none;
}

@media (min-width: 1280px) {
    .amb__objs .amb-o.amb-slim {
        display: block;
    }
}

@media (min-width: 1360px) {
    .amb__objs .amb-o {
        display: block;
    }
}

/* JS yoksa yedek yerleşim (yüzde ile) */
.amb__objs .amb-l { left: 1%; }
.amb__objs .amb-r { right: 1%; }
.amb-l1 { top: 6%; } .amb-l2 { top: 22%; } .amb-l3 { top: 38%; } .amb-l4 { top: 52%; } .amb-l5 { top: 66%; } .amb-l6 { top: 80%; } .amb-l7 { top: 92%; }
.amb-r1 { top: 4%; } .amb-r2 { top: 18%; } .amb-r3 { top: 33%; } .amb-r4 { top: 50%; } .amb-r5 { top: 66%; } .amb-r6 { top: 80%; } .amb-r7 { top: 92%; }

/* ==========================================================================
   4) Nesne kitaplığı (ortak): dış kap konum + parallax (JS transform), iç kap ölçek + süzülme
   ========================================================================== */

.amb-o {
    position: absolute;
    display: block;
    line-height: 1.2;
    pointer-events: none;
    font-family: var(--font);
}

a.amb-o--link {
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.amb-o__in {
    display: block;
    rotate: var(--amb-r, 0deg);
    scale: var(--amb-s, 1);
    transition: scale 0.35s var(--ease), rotate 0.35s var(--ease);
}

a.amb-o--link:hover .amb-o__in,
a.amb-o--link:focus-visible .amb-o__in {
    scale: calc(var(--amb-s, 1) * 1.07);
    rotate: calc(var(--amb-r, 0deg) * 0.4);
}

/* Süzülme: ortam katmanında ve .amb-float kabının içinde; ekran dışına çıkınca ambient.js durdurur (.amb-paused) */
.amb .amb-o:not(.amb-still) .amb-o__in,
.amb-o.amb-float:not(.amb-still) .amb-o__in,
.amb-float .amb-o:not(.amb-still) .amb-o__in {
    animation: amb-bob var(--amb-d, 9s) var(--ease-io) var(--amb-dl, 0s) infinite alternate;
}

.amb-paused .amb-o__in,
.amb-paused .amb-chart__line,
.amb-paused .amb-bezier__curve {
    animation-play-state: paused !important;
}

@keyframes amb-bob {
    from {
        translate: 0 0;
    }
    to {
        translate: 0 -9px;
        rotate: calc(var(--amb-r, 0deg) + 2deg);
    }
}

.amb-svg {
    display: block;
    overflow: visible;
}

.amb-f-brand { fill: var(--brand); }
.amb-f-brand-d { fill: var(--brand-600); }
.amb-f-ink { fill: var(--ink); }
.amb-f-cream { fill: #f4dccb; }
.amb-f-wood { fill: #ecc79f; }
.amb-s-metal { stroke: #8f8f8f; }
.amb-s-coffee { stroke: rgb(140 86 44 / 0.3); }
.amb-s-coffee--soft { stroke: rgb(140 86 44 / 0.18); }

/* Yapışkan not (düz, kurumsal etiket) */
.amb-note {
    position: relative;
    display: block;
    width: 132px;
    min-height: 104px;
    padding: 28px 14px 14px;
    background: var(--note);
    box-shadow: var(--amb-sh);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: left;
}

.amb-note__text {
    display: block;
}

.amb-note__pin {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 52px;
    height: 16px;
    margin-left: -26px;
    background: rgb(255 255 255 / 0.7);
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.06);
    rotate: -4deg;
}

.amb-note--alt .amb-note {
    background: #fff;
    border-left: 4px solid var(--brand);
}

.amb-note--b .amb-note {
    background: var(--brand-100);
}

/* Renk kartelası (yelpaze) */
.amb-swatch {
    position: relative;
    display: block;
    width: 128px;
    height: 132px;
}

.amb-swatch__card {
    position: absolute;
    bottom: 4px;
    left: 30px;
    display: grid;
    grid-template-rows: 62% 1fr;
    width: 60px;
    height: 100px;
    padding: 4px;
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--amb-sh);
    transform-origin: 14px 88px;
}

.amb-swatch__card b {
    border-radius: 4px;
    background: var(--brand);
}

.amb-swatch__card i {
    align-self: center;
    font-family: var(--mono);
    font-size: 7.5px;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.amb-swatch__card--1 { rotate: 12deg; }
.amb-swatch__card--2 { rotate: -6deg; }
.amb-swatch__card--3 { rotate: -24deg; }
.amb-swatch__card--2 b { background: #fff3ea; box-shadow: inset 0 0 0 1px rgb(20 20 20 / 0.08); }
.amb-swatch__card--3 b { background: var(--ink); }

.amb-swatch__pin {
    position: absolute;
    bottom: 12px;
    left: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9c9c9;
    box-shadow: inset 0 0 0 2px #fff;
}

.amb-swatch__label {
    position: absolute;
    top: 0;
    right: -6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Cetvel */
.amb-ruler {
    position: relative;
    display: block;
    width: 36px;
    height: 190px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, #e6d6c8);
    border-radius: 5px;
    background:
        repeating-linear-gradient(to bottom, rgb(20 20 20 / 0.5) 0 1px, transparent 1px 38px) 0 6px / 16px 100% no-repeat,
        repeating-linear-gradient(to bottom, rgb(20 20 20 / 0.35) 0 1px, transparent 1px 7.6px) 0 6px / 9px 100% no-repeat,
        #fbf1e6;
    box-shadow: 0 6px 8px -6px rgb(20 20 20 / 0.3);
}

.amb-ruler__n {
    position: absolute;
    left: 18px;
    font-family: var(--mono);
    font-size: 8px;
    color: var(--ink-soft);
}

.amb-ruler__n:nth-child(1) { top: 4px; }
.amb-ruler__n:nth-child(2) { top: 80px; }
.amb-ruler__n:nth-child(3) { top: 156px; }

/* İmleç etiketi */
.amb-cursor {
    position: relative;
    display: block;
    width: 96px;
    height: 54px;
}

.amb-cursor__arrow {
    position: absolute;
    top: 0;
    left: 0;
    fill: var(--brand-600);
}

.amb-cursor__tag {
    position: absolute;
    top: 20px;
    left: 18px;
    padding: 3px 9px 4px;
    border-radius: 3px 10px 10px 10px;
    background: var(--brand-600);
    font-size: 0.78rem;
    font-weight: 650;
    color: #fff;
    white-space: nowrap;
}

/* "Aa" yazı tipi kartı */
.amb-aa {
    display: grid;
    gap: 6px;
    width: 118px;
    padding: 12px 12px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--amb-sh);
    text-align: left;
}

.amb-aa__big {
    font-size: 3.1rem;
    font-weight: 650;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: var(--ink);
}

.amb-aa__meta {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 7.5px;
    color: var(--muted);
}

.amb-aa__row {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--brand-600);
}

/* Mini telefon çerçevesi */
.amb-phone {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    width: 80px;
    height: 156px;
    padding: 18px 8px 8px;
    border: 5px solid var(--ink);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 10px -8px rgb(20 20 20 / 0.4);
}

.amb-phone__notch {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 26px;
    height: 6px;
    margin-left: -13px;
    border-radius: 6px;
    background: var(--ink);
}

.amb-phone__hero {
    height: 40px;
    border-radius: 6px;
    background: var(--brand);
}

.amb-phone__line {
    width: 90%;
    height: 5px;
    border-radius: 3px;
    background: #e4e4e4;
}

.amb-phone__line--s { width: 60%; }

.amb-phone__btn {
    width: 46%;
    height: 10px;
    border-radius: 6px;
    background: var(--ink);
}

.amb-phone__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.amb-phone__grid i {
    height: 22px;
    border-radius: 4px;
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-100);
}

/* Mini tablet */
.amb-tablet {
    display: grid;
    gap: 7px;
    align-content: start;
    width: 150px;
    height: 112px;
    padding: 8px 9px;
    border: 5px solid var(--ink);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 10px -8px rgb(20 20 20 / 0.4);
}

.amb-tablet__bar {
    display: flex;
    gap: 3px;
}

.amb-tablet__bar i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4d4d4;
}

.amb-tablet__hero {
    position: relative;
    height: 38px;
    border-radius: 5px;
    background: var(--brand-100);
}

.amb-tablet__hero b {
    position: absolute;
    bottom: 6px;
    left: 8px;
    width: 34px;
    height: 8px;
    border-radius: 4px;
    background: var(--brand);
}

.amb-tablet__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.amb-tablet__row i {
    height: 16px;
    border-radius: 3px;
    background: #efefef;
}

.amb-tablet__line {
    width: 60%;
    height: 5px;
    border-radius: 3px;
    background: #e4e4e4;
}

/* Yayında damgası (düz dikdörtgen; dönen yazı yok) */
.amb-stamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 10px;
    border: 2px solid var(--brand-600);
    border-radius: 8px;
    background: rgb(255 255 255 / 0.6);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600);
    white-space: nowrap;
}

.amb-stamp .amb-svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Kahve izi (düz halka) */
/* Tel kafes eskiz kâğıdı */
.amb-wire {
    display: grid;
    gap: 7px;
    width: 136px;
    padding: 10px;
    border-radius: 6px;
    background:
        linear-gradient(to right, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 12px 12px,
        linear-gradient(to bottom, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 12px 12px,
        #fff;
    box-shadow: var(--amb-sh);
    text-align: left;
}

.amb-wire__bar {
    display: flex;
    gap: 3px;
}

.amb-wire__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #b9b9b9;
}

.amb-wire__hero {
    position: relative;
    height: 52px;
    border: 1.5px dashed #b9b9b9;
    border-radius: 4px;
}

.amb-wire__x {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top right, transparent calc(50% - 0.6px), #c9c9c9 50%, transparent calc(50% + 0.6px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.6px), #c9c9c9 50%, transparent calc(50% + 0.6px));
}

.amb-wire__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.amb-wire__cols i {
    height: 22px;
    border: 1.5px solid #cfcfcf;
    border-radius: 3px;
}

.amb-wire__cols i:first-child {
    border-color: var(--brand-300);
    background: var(--brand-50);
}

.amb-wire__note {
    font-family: var(--mono);
    font-size: 7.5px;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Büyüyen grafik */
.amb-chart {
    display: block;
    width: 144px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--amb-sh);
}

.amb-chart svg {
    width: 100%;
    height: auto;
}

.amb-chart__label {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
}

.amb-chart__grid { stroke: var(--line); }
.amb-chart__area { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.amb-chart__dot { fill: var(--brand-600); }

.amb-chart__line {
    stroke: var(--brand);
    stroke-dasharray: 100;
    animation: amb-chart 7s var(--ease-io) infinite;
}

@keyframes amb-chart {
    0% { stroke-dashoffset: 100; }
    45%, 100% { stroke-dashoffset: 0; }
}

/* Bildirim baloncuğu */
.amb-bubble {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 8px 10px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: var(--amb-sh);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.amb-bubble__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}

/* Bant parçası */
.amb-tape {
    display: block;
    width: 84px;
    height: 22px;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.75) 0 6px, rgb(255 255 255 / 0.55) 6px 12px);
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.08);
}

/* Tarayıcı penceresi (sayfa kurulan) */
.amb-browser {
    display: block;
    width: 150px;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--amb-sh);
}

.amb-browser__bar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: #f6f3ef;
}

.amb-browser__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d6d0c9;
}

.amb-browser__bar i:first-child { background: var(--brand); }

.amb-browser__tab {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.amb-browser__body {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.amb-browser__hero {
    height: 36px;
    border-radius: 4px;
    background: var(--brand-100);
}

.amb-browser__line {
    width: 80%;
    height: 5px;
    border-radius: 3px;
    background: #e4e4e4;
}

.amb-browser__line--s { width: 50%; }

.amb-browser__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.amb-browser__cols i {
    height: 18px;
    border-radius: 3px;
    background: #f1f1f1;
}

.amb-browser__cols i:first-child { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }

/* Kontrol listesi */
.amb-check {
    display: grid;
    gap: 7px;
    width: 138px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--amb-sh);
}

.amb-check__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}

.amb-check__row .amb-svg {
    flex: none;
    stroke: var(--brand-600);
    stroke-width: 1.5;
}

.amb-check__row .amb-svg rect {
    fill: var(--brand-50);
}

.amb-check__row .amb-svg path {
    stroke-width: 2;
}

/* Arama çubuğu + sonuç */
.amb-search {
    display: grid;
    gap: 7px;
    width: 156px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--amb-sh);
}

.amb-search__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}

.amb-search__bar .amb-svg {
    flex: none;
    stroke: var(--brand-600);
    stroke-width: 1.6;
}

.amb-search__hit {
    display: grid;
    gap: 4px;
    padding: 0 3px;
}

.amb-search__hit b {
    width: 62%;
    height: 6px;
    border-radius: 3px;
    background: var(--brand);
}

.amb-search__hit i {
    width: 34%;
    height: 4px;
    border-radius: 2px;
    background: #1a9a52;
}

.amb-search__hit u {
    width: 88%;
    height: 4px;
    border-radius: 2px;
    background: #e4e4e4;
}

/* Arayüz parçaları: düğme + alan + anahtar */
.amb-ui {
    display: grid;
    gap: 8px;
    width: 138px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--amb-sh);
}

.amb-ui__btn {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--brand-600);
    font-size: 0.76rem;
    font-weight: 650;
    color: #fff;
    text-align: center;
}

.amb-ui__input {
    display: block;
    padding: 7px 9px;
    border: 1.5px solid var(--brand-300);
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--brand-50);
}

.amb-ui__input i {
    display: block;
    width: 55%;
    height: 5px;
    border-radius: 3px;
    background: #dcdcdc;
}

.amb-ui__toggle {
    position: relative;
    display: block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--brand);
}

.amb-ui__toggle i {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

/* Kalem aracı eğrisi */
.amb-bezier__guide { stroke: #b9b9b9; stroke-dasharray: 3 3; }
.amb-bezier__curve { stroke: var(--brand); stroke-dasharray: 100; animation: amb-chart 8s var(--ease-io) infinite; }
.amb-bezier__node { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.amb-bezier__handle { fill: var(--brand); stroke: #fff; stroke-width: 1.5; }

/* Rozet (kısa fayda etiketi) */
.amb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--amb-sh);
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
}

.amb-badge .amb-svg {
    flex: none;
    padding: 2px;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

/* Koyu zeminde */
.amb-on-ink .amb-note { background: var(--note); }
.amb-on-ink .amb-stamp { border-color: var(--brand); color: var(--brand-100); background: var(--ink); }
.amb-on-ink .amb-cursor__arrow { fill: #fff; }
.amb-on-ink .amb-cursor__tag { background: #fff; color: var(--ink); }
.amb-on-ink .amb-bezier__node { fill: var(--ink); stroke: #fff; }
.amb-on-ink .amb-bezier__guide { stroke: #777; }
.amb-on-ink .amb-s-coffee { stroke: rgb(255 255 255 / 0.16); }
.amb-on-ink .amb-s-coffee--soft { stroke: rgb(255 255 255 / 0.1); }


/* Nesne başına eğim ve süzülme zamanlaması */
.amb-l1 { --amb-r: -6deg; --amb-d: 8s; --amb-dl: -0s; }
.amb-r1 { --amb-r: 7deg; --amb-d: 9s; --amb-dl: -0s; }
.amb-l2 { --amb-r: 5deg; --amb-d: 11s; --amb-dl: -2s; }
.amb-r2 { --amb-r: -4deg; --amb-d: 14s; --amb-dl: -3s; }
.amb-l3 { --amb-r: -3deg; --amb-d: 8s; --amb-dl: -4s; }
.amb-r3 { --amb-r: 3deg; --amb-d: 13s; --amb-dl: -6s; }
.amb-l4 { --amb-r: 0deg; --amb-d: 11s; --amb-dl: -6s; }
.amb-r4 { --amb-r: -6deg; --amb-d: 12s; --amb-dl: -1s; }
.amb-l5 { --amb-r: 8deg; --amb-d: 8s; --amb-dl: -1s; }
.amb-r5 { --amb-r: 10deg; --amb-d: 11s; --amb-dl: -4s; }
.amb-l6 { --amb-r: -8deg; --amb-d: 11s; --amb-dl: -3s; }
.amb-r6 { --amb-r: -3deg; --amb-d: 10s; --amb-dl: -7s; }
.amb-l7 { --amb-r: 3deg; --amb-d: 8s; --amb-dl: -5s; }
.amb-r7 { --amb-r: 4deg; --amb-d: 9s; --amb-dl: -2s; }
.amb-l8 { --amb-r: -4deg; --amb-d: 11s; --amb-dl: -0s; }
.amb-r8 { --amb-r: -5deg; --amb-d: 14s; --amb-dl: -5s; }
.amb-l9 { --amb-r: 6deg; --amb-d: 8s; --amb-dl: -2s; }
.amb-r9 { --amb-r: 2deg; --amb-d: 13s; --amb-dl: -0s; }
.amb-l10 { --amb-r: -2deg; --amb-d: 11s; --amb-dl: -4s; }
.amb-r10 { --amb-r: 5deg; --amb-d: 12s; --amb-dl: -3s; }
.amb .amb-hide { display: none !important; }

/* ==========================================================================
   2) Hızlı iletişim (speed dial)
   ========================================================================== */

.dial {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 44;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    transition: opacity 0.3s, transform 0.35s var(--ease), visibility 0s;
}

html:not(.dial-js) .dial {
    display: none;
}

.dial.is-off {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.35s var(--ease), visibility 0s linear 0.3s;
}

.dial__main {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    min-width: 52px;
    padding: 0 1.1rem 0 1rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 999px;
    overflow: hidden;
    background: var(--ink);
    box-shadow: 0 1px 0 rgb(20 20 20 / 0.2), 0 6px 10px -6px rgb(20 20 20 / 0.5);
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s var(--ease), background-color 0.25s;
}

.dial__main:hover {
    background: #262626;
    transform: translateY(-2px);
}

.dial__main:active {
    transform: translateY(1px) scale(0.98);
}

.dial__main .icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.dial__main-open,
.dial__main-close {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: opacity 0.2s, transform 0.3s var(--ease);
}

.dial__main-close {
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
}

.dial.is-open .dial__main-open {
    opacity: 0;
    transform: scale(0.7);
}

.dial.is-open .dial__main-close {
    opacity: 1;
    transform: none;
}

/* Kapalıyken arada bir uzayan halka (yalnızca dikkat çekmek için; transform/opacity) */
.dial__main::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--brand);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.fx-lvl-full .dial:not(.is-open):not(.is-off) .dial__main::after {
    animation: dial-ring 5.5s var(--ease) 3s infinite;
}

@keyframes dial-ring {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }
    22%,
    100% {
        opacity: 0;
        transform: scale(1.35, 1.6);
    }
}

@media (max-width: 599px) {
    .dial__main {
        width: 52px;
        padding: 0;
    }

    .dial__main-text {
        display: none;
    }
}

/* Açılan panel */
.dial__panel {
    width: min(19.5rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid rgb(20 20 20 / 0.14);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 0 rgb(20 20 20 / 0.05), 0 10px 16px -10px rgb(20 20 20 / 0.35);
    transform-origin: 100% 100%;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.2s, transform 0.35s var(--ease);
}

.dial__panel.is-open {
    opacity: 1;
    transform: none;
}

.dial__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.6rem 0.55rem;
    font-family: var(--mono);
    font-size: var(--fs-label, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.dial__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1fa85a;
}

.dial__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #1fa85a;
    animation: dial-pulse 2s var(--ease) infinite;
}

@keyframes dial-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

.dial__list {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dial__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    overflow: hidden;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.2s;
    --flame-inset: 0.65rem;
    --flame-bottom: 0px;
    --flame-h: 10px;
}

.dial__item:hover,
.dial__item:focus-visible {
    background: var(--brand-50);
}

.dial__icon {
    flex: none;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 8px;
    border-radius: 10px;
    color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-100);
    transition: color 0.2s, background-color 0.2s;
}

.dial__item--whatsapp .dial__icon {
    color: var(--wa);
    background: #e9f7ef;
    box-shadow: inset 0 0 0 1px #c6ebd5;
}

.dial__item:hover .dial__icon,
.dial__item:focus-visible .dial__icon {
    color: #fff;
    background: var(--brand-600);
    box-shadow: none;
}

.dial__item--whatsapp:hover .dial__icon,
.dial__item--whatsapp:focus-visible .dial__icon {
    background: var(--wa);
}

.dial__text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.dial__label {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.2;
}

.dial__value {
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}

/* Sıralı belirme */
.dial__panel.is-open .dial__list > li {
    animation: dial-in 0.4s var(--ease) both;
    animation-delay: calc(0.04s + var(--i, 0) * 0.05s);
}

.dial__list > li:nth-child(1) { --i: 0; }
.dial__list > li:nth-child(2) { --i: 1; }
.dial__list > li:nth-child(3) { --i: 2; }
.dial__list > li:nth-child(4) { --i: 3; }
.dial__list > li:nth-child(5) { --i: 4; }

@keyframes dial-in {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
}

/* Başa dön düğmesi hızlı iletişimin üstünde durur; panel açıkken gizlenir */
.dial:not(.is-off) ~ .to-top {
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 52px + 0.75rem);
}

.dial.is-open ~ .to-top {
    opacity: 0;
    visibility: hidden;
}

/* ==========================================================================
   3) Sayfa içi bölüm çubuğu (menünün altında; ≥ 720 px; kaydırınca belirir)
   ========================================================================== */

.toc {
    position: absolute;
    top: calc(100% + 6px);
    right: var(--gutter);
    left: var(--gutter);
    z-index: -1;
    display: none;
    max-width: var(--container);
    margin: 0 auto;
    pointer-events: auto;
    border: 1px solid rgb(20 20 20 / 0.12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgb(20 20 20 / 0.04), 0 6px 8px -6px rgb(20 20 20 / 0.25);
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition: opacity 0.25s, transform 0.35s var(--ease);
}

@media (min-width: 720px) {
    .toc.is-ready {
        display: flex;
        align-items: center;
    }

    .toc.is-on {
        opacity: 1;
        transform: none;
    }

    .toc:not(.is-on) {
        pointer-events: none;
        visibility: hidden;
    }
}

.toc__list {
    display: flex;
    flex: 1;
    gap: 0.15rem;
    min-width: 0;
    margin: 0;
    padding: 0.3rem;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.toc__list::-webkit-scrollbar {
    display: none;
}

.toc__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.8rem;
    overflow: hidden;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
    --flame-inset: 0.7rem;
    --flame-bottom: 0px;
    --flame-h: 9px;
}

.toc__link:hover {
    color: var(--ink);
}

.toc__link[aria-current="location"] {
    color: var(--ink);
    background: var(--brand-50);
}

.toc__n {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--brand-600);
}

.toc__count {
    flex: none;
    margin: 0 0.9rem 0 0.4rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

html.has-toc {
    scroll-padding-top: 136px;
}


/* ==========================================================================
   5) Bölüm yardımcıları (diğer sayfalar kullanır; adlar sabit; düz, net zemin — ışık lekesi yok)
   ========================================================================== */

.sec-tint,
.sec-cream,
.sec-ink,
.sec-deco {
    position: relative;
    isolation: isolate;
}

/* Düz krem, çok ince nokta deseni */
.sec-tint {
    background:
        radial-gradient(circle, rgb(20 20 20 / 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
        var(--cream-2);
    border-block: 1px solid rgb(20 20 20 / 0.08);
}

/* Düz beyaz */
.sec-cream {
    background: #fff;
    border-block: 1px solid rgb(20 20 20 / 0.08);
}

/* Koyu bant, beyaz yazı. İçindeki beyaz kartlar kendi yazı rengini (color) vermelidir. */
.sec-ink {
    --muted: #b8b8b8;
    --faint: #a8a8a8;
    --ink-soft: #dcdcdc;
    --line: rgb(255 255 255 / 0.12);
    --line-2: rgb(255 255 255 / 0.2);
    color: #fff;
    background:
        linear-gradient(to right, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(to bottom, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
        var(--ink);
}

.sec-ink :focus-visible {
    outline-color: color-mix(in srgb, var(--brand) 70%, #fff);
}

/* .sec-deco: kenar boşluğunda (içerik sütununun DIŞINDA) küçük bir yapışkan not + kartela şeridi (≥ 1360 px) */
.sec-deco::before,
.sec-deco::after {
    content: "";
    position: absolute;
    z-index: -1;
    display: none;
    pointer-events: none;
}

@media (min-width: 1360px) {
    .sec-deco::before,
    .sec-deco::after {
        display: block;
    }
}

.sec-deco::before {
    top: clamp(1.5rem, 4vw, 3.5rem);
    left: max(14px, calc(50% - var(--container) / 2 - 100px));
    width: 76px;
    height: 76px;
    background:
        linear-gradient(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.7)) 50% 0 / 36px 12px no-repeat,
        repeating-linear-gradient(to bottom, transparent 0 13px, rgb(20 20 20 / 0.1) 13px 14px) 10px 26px / 56px 40px no-repeat,
        var(--note);
    box-shadow: var(--amb-sh);
    rotate: -7deg;
}

.sec-deco::after {
    right: max(14px, calc(50% - var(--container) / 2 - 104px));
    bottom: clamp(1.5rem, 4vw, 3.5rem);
    width: 84px;
    height: 32px;
    border-radius: 7px;
    background:
        linear-gradient(90deg, var(--brand) 0 25%, var(--brand-300) 25% 50%, #fff3ea 50% 75%, var(--ink) 75%) 5px 5px / calc(100% - 10px) calc(100% - 10px) no-repeat,
        #fff;
    box-shadow: var(--amb-sh);
    rotate: 5deg;
}

/* ==========================================================================
   5a) Sayfa başı nesne sütunları (partials/ambient-head.php): başlık metninin iki yanındaki boşluk, ≥ 1100 px
   ========================================================================== */

.ph-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Dar ekran: başlığın altında küçük bir nesne şeridi (3 nesne), metne binmez */
@media (max-width: 1099px) {
    .page-head {
        padding-bottom: 6rem;
    }

    .ph-deco {
        inset: auto 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        height: 5.4rem;
        padding-bottom: 0.6rem;
        overflow: hidden;
    }

    .ph-deco .ph-zone {
        display: contents;
    }

    .ph-deco .ph-zone .ph-o {
        --amb-s: 0.52;
        flex: none;
        margin: -22px -26px;
    }

    .ph-deco .ph-zone--l .ph-o:nth-child(n+3),
    .ph-deco .ph-zone--r .ph-o:nth-child(n+2),
    .ph-deco .ph-o--pencil,
    .ph-deco .ph-o--clip,
    .ph-deco .ph-o--tape,
    .ph-deco .ph-o--coffee {
        display: none;
    }
}

@media (min-width: 1100px) {
    .ph-deco {
        display: block;
    }
}

.ph-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: calc(50% - 24rem);
    min-width: 0;
    padding-top: clamp(90px, 12vh, 130px);
    padding-bottom: 1rem;
}

.ph-zone--l { left: 0; align-items: flex-start; }
.ph-zone--r { right: 0; align-items: flex-end; }

.ph-zone .ph-o {
    position: relative;
    --amb-s: 0.62;
    margin-inline: clamp(0px, 1.2vw, 22px);
}

.ph-zone .ph-o:nth-child(2) { align-self: center; }

@media (min-width: 1360px) {
    .ph-zone .ph-o { --amb-s: 0.78; }
}

@media (min-width: 1700px) {
    .ph-zone .ph-o { --amb-s: 0.95; }
}

/* Sayfa açılışında nesneler sırayla yerine oturur */
@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .ph-zone .amb-o {
        animation: amb-pop 0.7s var(--ease) both;
        animation-delay: calc(0.25s + var(--ph-i, 0) * 0.12s);
    }
}

.ph-o--1 { --ph-i: 0; }
.ph-o--2 { --ph-i: 1; }
.ph-o--3 { --ph-i: 2; }

@keyframes amb-pop {
    from {
        opacity: 0;
        translate: 0 14px;
    }
}

.ph-tilt-l1 { --amb-r: -7deg; --amb-d: 9s; }
.ph-tilt-l2 { --amb-r: 4deg; --amb-d: 11s; --amb-dl: -3s; }
.ph-tilt-l3 { --amb-r: -3deg; --amb-d: 8s; --amb-dl: -5s; }
.ph-tilt-r1 { --amb-r: 6deg; --amb-d: 10s; --amb-dl: -2s; }
.ph-tilt-r2 { --amb-r: -5deg; --amb-d: 12s; --amb-dl: -6s; }
.ph-tilt-r3 { --amb-r: 3deg; --amb-d: 9s; --amb-dl: -4s; }

/* ==========================================================================
   Hareket seviyeleri
   ========================================================================== */

/* Sakin: süzülme kapalı; kaydırmaya bağlı parallax ve tek seferlik girişler açık */
.amb-calm .amb-o__in,
.amb-calm .amb-chart__line,
.amb-calm .amb-bezier__curve {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .amb-o__in,
    .amb-chart__line,
    .amb-bezier__curve,
    .dial__main::after,
    .dial__pulse::after {
        animation: none !important;
    }

    .amb-chart__line,
    .amb-bezier__curve {
        stroke-dashoffset: 0;
    }

    .dial__panel.is-open .dial__list > li {
        animation: none;
    }
}

html[data-motion="off"] .amb-o__in,
html[data-motion="off"] .amb-chart__line,
html[data-motion="off"] .amb-bezier__curve,
html[data-motion="off"] .dial__main::after,
html[data-motion="off"] .dial__pulse::after {
    animation: none !important;
}

html[data-motion="off"] .amb-chart__line,
html[data-motion="off"] .amb-bezier__curve {
    stroke-dashoffset: 0;
}

html[data-motion="calm"] .dial__main::after {
    animation: none !important;
}

@media print {
    .amb,
    .dial,
    .toc {
        display: none !important;
    }
}