/* ===========================================================================
 * Bilesen katmani
 *
 * Kural: hicbir sey YUKSELMEZ, OLCEKLENMEZ, PARILDAMAZ.
 * Etkilesim geri bildirimi renk, cizgi kalinligi ve <=4px kayma ile verilir.
 * ======================================================================== */

@layer components {

  
/* ===========================================================================
 * KAS — bolum basligi blogu
 * Her bolum bununla acilir. 12 farkli deseni tek sistem gibi hissettiren sey
 * bu tutarliliktir.
 * ======================================================================== */

  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-body);
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-600);

  }
  .eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--sage-500);
    flex: none;

  }
  .eyebrow--plain::before {
    display: none;

  }
  .eyebrow--invert {
    color: var(--sand-500);

  }
  .eyebrow--invert::before {
    background: var(--sand-700);

  }
  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding-block-end: var(--s-6);
    border-block-end: var(--border-hair);
    margin-block-end: var(--s-10);

  }
  .section-head__title {
    font-size: var(--t-2xl);

  }
  .section-head__lede {
    max-width: var(--measure-narrow);
    font-size: var(--t-md);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);

  /* Baslik solda, baglanti sagda */
  }
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-8);
    flex-wrap: wrap;

  
/* ===========================================================================
 * BUTONLAR — dikdortgen. Yuvarlak degil, golgeli degil.
 * ======================================================================== */

  }
  .btn {
    --btn-bg: var(--sage-600);
    --btn-fg: #fff;
    --btn-bg-hover: var(--sage-700);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.875rem;
    padding: 0.875rem 2rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: var(--bw-hair) solid transparent;
    border-radius: var(--r-1);
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);

  }
  .btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-fg);

  }
  .btn .icon {
    width: 1.15em;
    height: 1.15em;

  /* Ikincil — cerceve, dolgu yok */
  }
  .btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--sage-700);
    --btn-bg-hover: var(--sage-50);
    border-color: var(--sage-500);
    box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);

  }
  .btn--outline:hover {
    color: var(--sage-800);
    border-color: var(--sage-700);

  /* Koyu zeminde */
  }
  .btn--sand {
    --btn-bg: var(--sand-500);
    --btn-fg: var(--sage-950);
    /* 7.55:1 — dogrulandi */
    --btn-bg-hover: var(--sand-400);

  }
  .btn--ghost-invert {
    --btn-bg: transparent;
    --btn-fg: var(--sand-300);
    --btn-bg-hover: rgb(255 255 255 / 0.06);
    border-color: var(--sand-700);

  }
  .btn--ghost-invert:hover {
    color: var(--sand-200);
    border-color: var(--sand-500);

  }
  .btn--sm {
    min-height: 2.25rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--t-2xs);

  }
  .btn--lg {
    min-height: 3.25rem;
    padding: 1rem 2.5rem;

  }
  .btn--full {
    width: 100%;

  /* ---------------------------------------------------------------------------
 * Metin baglantisi + ok — ikincil eylem
 * ------------------------------------------------------------------------ */

  }
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 1.5rem;
    padding-block: var(--s-1);
    /* WCAG 2.5.8 dokunma hedefi */
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--sage-700);
    text-decoration: none;

  }
  .link-arrow .icon {
    width: 1em;
    height: 1em;
    transition: transform var(--dur) var(--ease-out);

  }
  .link-arrow:hover {
    color: var(--sage-800);

  }
  @media (hover: hover) {
    .link-arrow:hover .icon {
      transform: translateX(4px);
    }

  }
  .link-arrow--invert {
    color: var(--sand-400);

  }
  .link-arrow--invert:hover {
    color: var(--sand-200);

  /* ---------------------------------------------------------------------------
 * Ikon butonu — WhatsApp vb.
 * ------------------------------------------------------------------------ */

  }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--border-hair);
    border-radius: var(--r-1);
    color: var(--sage-700);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);

  }
  .icon-btn:hover {
    border-color: var(--sage-500);
    box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);
    background: var(--sand-50);
    color: var(--sage-800);

  }
  .icon-btn .icon {
    width: 1.15rem;
    height: 1.15rem;

  
/* ===========================================================================
 * ① HERO SLIDER — Full-bleed Fotoğraf Arka Planlı Motto Slider
 * ======================================================================== */

  }
  .hero-slider-section {
    position: relative;
    background: var(--sage-950);
    overflow: hidden;

  }
  .hero-slider {
    position: relative;
    width: 100%;
    min-height: clamp(540px, 80vh, 740px);
    display: flex;
    align-items: center;
    overflow: hidden;

  }
  .hero-slider__track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

  }
  .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    z-index: 1;

  }
  .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;

  }
  .hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
    transition: transform 7s cubic-bezier(0.25, 1, 0.5, 1);

  }
  .hero-slide.is-active .hero-slide__bg {
    transform: scale(1);

  }
  .hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(14, 26, 18, 0.92) 0%,
        rgba(18, 34, 24, 0.78) 45%,
        rgba(20, 36, 26, 0.40) 100%);
    z-index: 1;

  }
  .hero-slide__container {
    position: relative;
    z-index: 3;
    width: 100%;

  }
  .hero-slide__content {
    max-width: 48rem;
    padding-block: clamp(4rem, 2.5rem + 5vw, 6.5rem);

  }
  .hero-slide__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--sage-200);
    background: rgb(255 255 255 / 0.12);
    backdrop-filter: blur(12px);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.18);
    margin-block-end: var(--s-5);

  }
  .hero-slide__badge .icon {
    width: 1rem;
    height: 1rem;
    color: var(--sage-300);

  }
  .hero-slide__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: var(--tr-display);
    margin-block-end: var(--s-5);
    text-wrap: balance;

  }
  .hero-slide__title em {
    font-style: italic;
    font-weight: 300;
    color: #b8e2c8;

  }
  .hero-slide__lede {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, 0.88);
    max-width: 46ch;
    margin-block-end: var(--s-8);

  }
  .hero-slide__actions {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;

  }
  .btn--hero-primary {
    background: var(--sage-500);
    color: #ffffff;
    border: 1px solid var(--sage-400);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  }
  .btn--hero-primary:hover {
    background: var(--sage-400);
    color: #ffffff;
    border-color: var(--sage-300);
    transform: translateY(-2px);

  }
  .btn--hero-outline {
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgb(255 255 255 / 0.35);

  }
  .btn--hero-outline:hover {
    background: #ffffff;
    color: var(--sage-950);
    border-color: #ffffff;
    transform: translateY(-2px);

  }
  .hero-slider__controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--s-8);
    z-index: 10;
    pointer-events: none;

  }
  .hero-slider__controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);

  }
  .hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;

  }
  .hero-slider__dot {
    position: relative;
    width: 2.25rem;
    height: 0.3rem;
    background: rgb(255 255 255 / 0.3);
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out);

  }
  .hero-slider__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sage-300);
    transform: scaleX(0);
    transform-origin: left;

  }
  .hero-slider__dot.is-active {
    width: 3.75rem;
    background: rgb(255 255 255 / 0.4);

  }
  .hero-slider__dot.is-active::after {
    transform: scaleX(1);
    transition: transform 6s linear;

  }
  .hero-slider__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;

  }
  .hero-slider__btn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: rgb(255 255 255 / 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);

  }
  .hero-slider__btn:hover {
    background: #ffffff;
    color: var(--sage-950);
    border-color: #ffffff;
    transform: scale(1.05);

  }
  .hero-bottom-bar {
    background: var(--paper-raised);
    border-block-end: var(--border-hair);
    padding-block: var(--s-6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  /* Şerit ve istatistik rayı eskiden bölüm içinde duruyordu; kendi üst
   boşlukları ve çerçeveleri vardı. Artık hero'nun altındaki bandın içindeler:
   bant zaten kendi dolgusunu ve alt çizgisini veriyor, o değerler burada
   sıfırlanır — yoksa çift çizgi ve boş bir şerit oluşur. */
  }
  .hero-bottom-bar .quickbar,
  .hero-bottom-bar .stat-rail {
    margin-block-start: 0;
    padding-block: 0;
    border-block: 0;

  /* Ikisi birden varsa aralarina tek bir ayirici */
  }
  .hero-bottom-bar .quickbar+.stat-rail {
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-6);
    border-block-start: var(--border-hair);

  }
  .hero-bottom-bar .stat-rail__cell {
    padding-block: var(--s-2);

  /* ---------------------------------------------------------------------------
 * Şikâyete göre hızlı yönlendirme çubuğu
 *
 * Dikey liste yerine yatay şerit: daha taranabilir ve hero'nun altında
 * tam genişlik bir bant olarak duruyor.
 * ------------------------------------------------------------------------ */

  }
  .quickbar {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    flex-wrap: wrap;
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-block: var(--s-5);
    border-block: var(--border-hair);

  }
  .quickbar__head {
    flex: none;
    font-family: var(--font-display);
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--ink-900);

  }
  .quickbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    margin: 0;
    padding: 0;

  }
  .quickbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border: var(--border-hair);
    border-radius: var(--r-2);
    background: var(--paper-raised);
    font-size: var(--t-xs);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

  }
  .quickbar__item .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--sage-600);
    transition: color var(--dur-fast) var(--ease-out);

  }
  @media (hover: hover) {
    .quickbar__item:hover {
      border-color: var(--sage-500);
      box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);
      background: var(--sand-50);
      color: var(--sage-800);
    }

  }
  .quickbar__item--all {
    border-color: var(--sage-400);
    color: var(--sage-700);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);

  }
  @media (max-width: 44rem) {
    .quickbar {
      display: block;
      /* Şerit ekran kenarına kadar kaysın — tam genişlik hissi */
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
    }

    .quickbar__head {
      margin-block-end: var(--s-4);
    }

    /* Yatay kaydırma: 7 öğe dar ekranda sarmak yerine kaydırılsın */
    .quickbar__list {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-snap-type: x proximity;
      padding-block: 2px;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
    }

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

    .quickbar__list>li {
      flex: none;
      scroll-snap-align: start;
    }

  /* ---------------------------------------------------------------------------
 * Istatistik rayi — hero'nun altinda tam genislik
 * ------------------------------------------------------------------------ */

  }
  .stat-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: clamp(3rem, 2rem + 4vw, 6rem);
    border-block: var(--border-hair);

  }
  .stat-rail__cell {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-6) var(--s-8) 0;

  }
  .stat-rail__cell+.stat-rail__cell {
    padding-inline-start: var(--s-6);
    border-inline-start: var(--border-hair);

  }
  .stat-rail__index {
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-400);

  }
  .stat-rail__value {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--ink-900);
    line-height: 1;

  }
  .stat-rail__label {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--text-faint);

  }
  @media (max-width: 48rem) {
    .stat-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-rail__cell:nth-child(odd) {
      padding-inline-start: 0;
      border-inline-start: 0;
    }

    .stat-rail__cell:nth-child(even) {
      padding-inline-start: var(--s-6);
      border-inline-start: var(--border-hair);
    }

    .stat-rail__cell:nth-child(n + 3) {
      border-block-start: var(--border-hair);
    }

  
/* ===========================================================================
 * ② HIZMET KARTI + YATAY ŞERİT
 *
 * Önceki tasarım kartları yalnızca hairline'larla ayrılan bir "cetvelli
 * tablo"ydu; 14 kalem alt alta gelince ayırt edilemiyor ve ana sayfayı
 * boğuyordu. Artık her kart kendi sınırına sahip ve ana sayfada yatay
 * kaydırılan bir şeritte duruyor.
 *
 * Şerit CSS scroll-snap ile kurulu — kütüphane yok, JS kapalıyken de
 * parmakla/trackpad ile kaydırılabilir. Oklar yalnızca ilerlemeli bir
 * iyileştirme.
 * ======================================================================== */

  }
  .svc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    border: var(--bw-hair) solid var(--rule);
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(44, 53, 47, 0.03);
    transition: transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);

  /* Üstte ince adaçayı çubuğu — hover'da soldan sağa açılır */
  }
  .svc::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: var(--sage-500);
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .svc:hover {
      transform: translateY(-4px);
      border-color: var(--sage-400);
      box-shadow: 0 12px 28px rgba(44, 53, 47, 0.08);
    }

    .svc:hover::before {
      transform: scaleX(1);
    }

    .svc:hover .svc__img {
      transform: scale(1.06);
    }

    .svc:hover .svc__icon-box {
      background: var(--sage-600);
      color: #fff;
    }

  /* --- görsel alanı --- */
  }
  .svc__media {
    position: relative;
    width: 100%;
    height: 11.5rem;
    overflow: hidden;
    background: var(--sand-100);

  }
  .svc__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);

  }
  .svc__head {
    position: absolute;
    inset: var(--s-3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;

  }
  .svc__icon-box {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / 0.8);
    border-radius: var(--r-2);
    color: var(--sage-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);

  }
  .svc__icon-box .icon {
    width: 1.35rem;
    height: 1.35rem;

  }
  .svc__index {
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    color: var(--ink-800);
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.55rem;
    border-radius: var(--r-1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

  /* --- içerik alanı --- */
  }
  .svc__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--s-5) var(--s-6) var(--s-6);

  }
  .svc__title {
    margin-block-start: 0;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--ink-900);
    text-wrap: balance;

  }
  .svc__title a {
    color: inherit;
    text-decoration: none;

  }
  .svc__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--r-3);

  }
  .svc__desc {
    margin-block-start: var(--s-2);
    
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

  /* --- alt satır --- */

  }
  .svc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-block-start: auto;
    padding-block-start: var(--s-5);

  }
  .svc__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--sage-700);

  }
  .svc__link .icon {
    width: 1em;
    height: 1em;
    transition: transform var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .svc:hover .svc__link .icon {
      transform: translateX(4px);
    }

  }
  .svc__wa {
    position: relative;
    z-index: 2;
    /* gerilmiş bağlantının üzerinde */
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--border-hair);
    border-radius: var(--r-2);
    color: var(--sage-700);
    transition: border-color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);

  }
  .svc__wa .icon {
    width: 1.1rem;
    height: 1.1rem;

  }
  @media (hover: hover) {
    .svc__wa:hover {
      border-color: var(--sage-500);
      box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);
      background: var(--sand-100);
    }

  /* ---------------------------------------------------------------------------
 * Izgara varyantı (/hizmetler)
 * ------------------------------------------------------------------------ */

  }
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--s-5);

  }
  .svc--grid {
    min-height: 17rem;

  }
  @media (max-width: 30rem) {
    .svc-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .svc--grid {
      min-height: 0;
    }

  /* ---------------------------------------------------------------------------
 * Yatay şerit (ana sayfa) — CSS scroll-snap, kütüphane yok
 * ------------------------------------------------------------------------ */

  }
  .svc-rail {
    position: relative;

  }
  .svc-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(19rem, 1fr);
    gap: var(--s-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* Kaydırma çubuğunu gizle — oklar ve sayaç yeterli gösterge */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Kartların gölge/kenarlığı kırpılmasın */
    padding-block: 2px;
    padding-inline: 2px;
    margin-inline: -2px;

  }
  .svc-rail__track::-webkit-scrollbar {
    display: none;

  }
  .svc-rail__track>.svc {
    scroll-snap-align: start;

  /* Şerit tam genişliğe taşar: kartlar ekranın kenarından başlar ama
   kaydırınca kenara kadar gider (editoryal "devam ediyor" hissi). */
  /* NOT: minmax() KULLANILMIYOR. Çok sayıda kolonda grid, alan yetmediği için
   her track'i minimuma indiriyor ve kartlar 224px'e sıkışıyordu. Şeritte
   kartın görünen genişliği sabit olmalı. */
  }
  @media (max-width: 62rem) {
    .svc-rail__track {
      grid-auto-columns: 46%;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
      scroll-padding-inline-start: var(--gutter);
    }

  }
  @media (max-width: 44rem) {
    .svc-rail__track {
      grid-auto-columns: 76%;
    }

  }
  @media (max-width: 30rem) {
    .svc-rail__track {
      grid-auto-columns: 84%;
    }

  /* --- kontroller --- */

  }
  .svc-rail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    margin-block-start: var(--s-8);

  }
  .svc-rail__progress {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--rule);
    overflow: hidden;

  }
  .svc-rail__progress span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--sage-500);
    transition: transform var(--dur) var(--ease-out),
      width var(--dur) var(--ease-out);

  }
  .svc-rail__nav {
    display: flex;
    gap: var(--s-2);

  }
  .svc-rail__btn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--border-hair);
    border-radius: var(--r-2);
    color: var(--sage-700);
    background: var(--paper-raised);
    transition: border-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out),
      opacity var(--dur) var(--ease-out);

  }
  .svc-rail__btn:hover {
    border-color: var(--sage-500);
    box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);

  }
  .svc-rail__btn[disabled] {
    opacity: 0.35;
    cursor: default;
    border-color: var(--rule);

  }
  .svc-rail__count {
    font-size: var(--t-2xs);
    letter-spacing: var(--tr-eyebrow);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;

  /* JS yoksa oklar gizlenir; parmakla/trackpad ile kaydırma çalışmaya devam eder */
  }
  .no-js .svc-rail__nav {
    display: none;

  
/* ===========================================================================
 * ③ MANIFESTO SLAB — tam genislik adacayi, YALNIZ tipografi
 * ======================================================================== */

  /* Zemin: markadan türetilmiş figür kompozisyonu (fotoğraf değil).
   Görsel zaten sage-900 zeminli; renk yedek olarak da tanımlı. */
  }
  .manifesto {
    padding-block: var(--section-y-lg);
    background-color: var(--sage-900);
    background-image: url('../img/graphics/panel-sage.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    color: var(--sand-200);

  }
  @media (max-width: 62rem) {

    /* Dar ekranda figür metnin arkasına düşmesin — sağa kaydır */
    .manifesto {
      background-position: 78% center;
    }

  }
  .manifesto__rule {
    width: 64px;
    height: 1px;
    margin-block-end: var(--s-8);
    background: var(--sand-800);
    border: 0;

  }
  .manifesto__text {
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    font-weight: 300;
    font-style: italic;
    line-height: var(--lh-snug);
    color: var(--sand-200);
    /* sage-900 uzerinde 10.99:1 */
    text-indent: -0.4em;
    /* asili tirnak */

  
/* ===========================================================================
 * ④ TEMEL DEĞERLER
 *
 * Önceki tasarımda dev rakam ile başlık üst üste biniyordu ("editoryal
 * bindirme") ve kırık görünüyordu; ayrıca veritabanındaki icon_key'ler hiç
 * kullanılmıyordu. Artık hizmet kartıyla aynı dili konuşan, ikonlu ve
 * sınırı belli kartlar var.
 * ======================================================================== */

  }
  .value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);

  }
  @media (max-width: 62rem) {
    .value-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  }
  @media (max-width: 40rem) {
    .value-grid {
      grid-template-columns: minmax(0, 1fr);
    }

  }
  .value {
    position: relative;
    padding: var(--s-6);
    background: var(--paper-raised);
    border: var(--bw-hair) solid var(--rule);
    border-radius: var(--r-2);
    transition: border-color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .value:hover {
      border-color: var(--sage-300);
      background: var(--sand-50);
    }

    .value:hover .value__icon {
      background: var(--sage-600);
      color: #fff;
    }

  }
  .value__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);

  }
  .value__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--sand-100);
    border-radius: var(--r-2);
    color: var(--sage-700);
    transition: background-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);

  }
  .value__icon .icon {
    width: 1.4rem;
    height: 1.4rem;

  }
  .value__title {
    font-family: var(--font-display);
    font-size: var(--t-base);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: var(--ink-900);

  /* İndeks artık başlığın üstüne binmiyor; sağ üstte küçük bir işaret */
  }
  .value__index {
    position: absolute;
    inset-block-start: var(--s-5);
    inset-inline-end: var(--s-5);
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-300);
    font-variant-numeric: tabular-nums;

  }
  .value__body {
    margin-block-start: var(--s-4);
    
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);

  
/* ===========================================================================
 * ⑤ EKİP
 *
 * Önceki tasarım tam genişlik "masthead satırları"ydı; üç kişide seyrek
 * duruyordu. Artık portresi öne çıkan üç profil kartı.
 * ======================================================================== */

  }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);

  }
  @media (max-width: 62rem) {
    .team-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  }
  @media (max-width: 40rem) {
    .team-grid {
      grid-template-columns: minmax(0, 1fr);
    }

  }
  .person {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    border: var(--bw-hair) solid var(--rule);
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(44, 53, 47, 0.03);
    transition: transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .person:hover {
      transform: translateY(-4px);
      border-color: var(--sage-400);
      box-shadow: 0 12px 28px rgba(44, 53, 47, 0.08);
    }

    .person:hover .person__photo {
      transform: scale(1.04);
    }

    .person:hover .person__link .icon {
      transform: translateX(4px);
    }

  }
  .person__media {
    position: relative;
    background: var(--sand-100);
    border-block-end: var(--bw-hair) solid var(--rule);
    overflow: hidden;

  }
  .person__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.4s var(--ease-out);

  /* Fotoğraf yokken monogram — aynı oranı korur */
  /* Kare oran: 4:5 kullanıldığında monogramın altında büyük bir boşluk
   kalıyordu. Fotoğraf yüklendiğinde de aynı oran geçerli olsun ki
   kartlar tek tek fotoğraf eklendikçe zıplamasın. */
  }
  .person__monogram {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--sand-100);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
    font-weight: 300;
    color: var(--sage-600);
    user-select: none;

  }
  .person__monogram::after {
    content: '';
    position: absolute;
    inset: var(--s-4);
    border: 1px solid rgb(255 255 255 / 0.55);
    pointer-events: none;

  /* Sertifika sayısı rozeti — gerçek bir güven sinyali */
  }
  .person__badge {
    position: absolute;
    inset-block-end: var(--s-4);
    inset-inline-start: var(--s-4);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.35rem 0.7rem;
    background: var(--paper-raised);
    border: var(--bw-hair) solid var(--rule);
    border-radius: var(--r-2);
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    color: var(--sage-700);

  }
  .person__badge .icon {
    width: 0.9rem;
    height: 0.9rem;

  }
  .person__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--s-6);

  }
  .person__name {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: var(--ink-900);

  }
  .person__name a {
    color: inherit;
    text-decoration: none;

  }
  .person__name a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--r-2);

  }
  .person__role {
    margin-block-start: var(--s-2);
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-600);

  }
  .person__bio {
    margin-block-start: var(--s-4);
    
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

  }
  .person__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-block-start: auto;
    padding-block-start: var(--s-5);

  }
  .person__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--sage-700);

  }
  .person__link .icon {
    width: 1em;
    height: 1em;
    transition: transform var(--dur) var(--ease-out);

  /* ---------------------------------------------------------------------------
 * Mobilde YATAY düzen.
 *
 * Kare portre dikey kartta 571px yer kaplıyordu; üç kart alt alta 1.700px
 * ediyordu. Dar ekranda küçük kare + yandaki metin çok daha verimli.
 * (Bu blok temel tanımlardan SONRA gelmek zorunda — aynı özgüllükte,
 * kaynak sırası belirleyici.)
 * ------------------------------------------------------------------------ */
  }
  @media (max-width: 40rem) {
    .person {
      flex-direction: row;
    }

    .person__media {
      flex: none;
      width: 7.5rem;
      align-self: stretch;
      border-block-end: 0;
      border-inline-end: var(--bw-hair) solid var(--rule);
    }

    .person__photo,
    .person__monogram {
      height: 100%;
      aspect-ratio: auto;
      min-height: 100%;
      object-fit: cover;
    }

    .person__monogram {
      font-size: var(--t-xl);
    }

    .person__monogram::after {
      inset: var(--s-2);
    }

    /* Rozet mobilde rol satırına metin olarak taşındı */
    .person__badge {
      display: none;
    }

    .person__body {
      padding: var(--s-5);
    }

    .person__name {
      font-size: var(--t-base);
    }

    .person__bio {
      -webkit-line-clamp: 2;
      margin-block-start: var(--s-3);
    }

    .person__foot {
      padding-block-start: var(--s-4);
    }

  
/* ===========================================================================
 * ⑥ UZMAN DETAY — CV listeleri
 * 14–16 satirla bu bir dergi CV'si gibi okunur; kart izgarasi dukkan gibi.
 * ======================================================================== */

  }
  .cv-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block-end: var(--s-4);
    border-block-end: var(--border-hair);

  }
  .cv-head__count {
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-400);
    font-variant-numeric: tabular-nums;

  }
  .cv-list {
    list-style: none;
    margin: 0;
    padding: 0;

  }
  .cv-list__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-2);
    border-block-end: var(--border-hair);

  }
  .cv-list__index {
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-400);
    line-height: 1.9;
    font-variant-numeric: tabular-nums;

  }
  .cv-list__label {
    font-size: var(--t-base);
    color: var(--ink-800);
    line-height: var(--lh-normal);

  }
  .cv-list__detail {
    margin-block-start: var(--s-1);
    font-size: var(--t-xs);
    color: var(--text-faint);

  }
  .cv-list__year {
    display: inline-block;
    margin-inline-start: var(--s-2);
    padding: 0.1rem 0.4rem;
    border: var(--border-hair);
    border-radius: var(--r-1);
    font-size: 0.7em;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--sage-700);

  /* Uzmanlik alanlari kisa satirlar — masaustunde iki kolon */
  }
  .cv-list--dense {
    columns: 2;
    column-gap: var(--s-10);

  }
  .cv-list--dense .cv-list__item {
    break-inside: avoid;

  }
  @media (max-width: 48rem) {
    .cv-list--dense {
      columns: 1;
    }

    .cv-list__item {
      grid-template-columns: 2.25rem minmax(0, 1fr);
      gap: var(--s-3);
    }

  
/* ===========================================================================
 * ⑦ YAN PANEL — hizmet detayindaki yapiskan CTA kutusu
 * ======================================================================== */

  }
  .side-panel {
    padding: var(--s-6);
    background: var(--sand-100);
    border-block-start: var(--bw-slab) solid var(--sage-500);

  }
  .side-panel__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--ink-900);

  }
  .side-panel__body {
    margin-block-start: var(--s-3);
    
    color: var(--text-muted);
    line-height: var(--lh-relaxed);

  }
  .side-panel .btn {
    margin-block-start: var(--s-6);

  }
  .side-panel__meta {
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-5);
    border-block-start: var(--border-hair);

  /* ---------------------------------------------------------------------------
 * Iletisim satiri — telefon / WhatsApp / adres / saat
 * Deger hala yer tutucuysa PHP tarafinda .contact-line--soon uretilir.
 * ------------------------------------------------------------------------ */

  }
  .contact-line {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    
    color: var(--text);
    text-decoration: none;
    line-height: var(--lh-normal);

  }
  .contact-line+.contact-line {
    margin-block-start: var(--s-4);

  /* Tiklanabilir iletisim satirlari icin dokunma hedefi */
  }
  a.contact-line {
    padding-block: var(--s-1);

  }
  .contact-line .icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-block-start: 0.15em;
    color: var(--sage-600);

  }
  a.contact-line:hover {
    color: var(--sage-700);

  }
  .contact-line__label {
    display: block;
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--text-faint);
    margin-block-end: 0.15rem;

  /* Bilgi henuz girilmemis — kirik tel: linki yerine sessiz durum */
  }
  .contact-line--soon {
    color: var(--text-faint);
    font-style: italic;

  }
  .contact-line--soon .icon {
    color: var(--ink-400);

  
/* ===========================================================================
 * ⑧ CTA BANDI — duz iki ton, GRADYAN YOK
 * ======================================================================== */






  }
  @media (max-width: 54rem) {

  
/* ===========================================================================
 * ⑨ FORMLAR — kutusuz, alt cizgili inputlar
 * ======================================================================== */

  }
  .field {
    display: block;

  }
  .field+.field {
    margin-block-start: var(--s-6);

  }
  .field__label {
    display: block;
    margin-block-end: var(--s-2);
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--text-faint);
    transition: color var(--dur-fast) var(--ease-out);

  }
  .field__req {
    color: var(--sage-600);

  }
  .field__input,
  .field__select,
  .field__textarea {
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: 0;
    border-block-end: var(--bw-hair) solid var(--field-border);
    border-radius: 0;
    font-size: var(--t-base);
    color: var(--text-strong);
    transition: border-color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);

  }
  .field__textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: var(--lh-relaxed);

  }
  .field__input::placeholder,
  .field__textarea::placeholder {
    color: var(--ink-400);
    opacity: 1;

  }
  .field__input:focus,
  .field__select:focus,
  .field__textarea:focus {
    outline: none;
    border-block-end-width: var(--bw-mark);
    border-block-end-color: var(--field-focus);
    background: var(--sand-50);

  }
  .field:focus-within .field__label {
    color: var(--sage-700);

  /* Select oku — data-URI (CSP: img-src 'self' data: izinli) */
  }
  .field__select {
    appearance: none;
    padding-inline-end: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2352624C'%3E%3Cpath d='M212.24 100.24l-80 80a6 6 0 0 1-8.48 0l-80-80a6 6 0 0 1 8.48-8.48L128 167.51l75.76-75.75a6 6 0 0 1 8.48 8.48Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1rem;
    cursor: pointer;

  }
  .field__select:focus {
    background-color: var(--sand-50);

  /* Hata durumu */
  }
  .field--error .field__input,
  .field--error .field__select,
  .field--error .field__textarea {
    border-block-end-color: var(--err);
    border-block-end-width: var(--bw-mark);

  }
  .field__error {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-start: var(--s-2);
    font-size: var(--t-xs);
    color: var(--err);

  }
  .field__error .icon {
    width: 1em;
    height: 1em;

  }
  .field__hint {
    margin-block-start: var(--s-2);
    font-size: var(--t-xs);
    color: var(--text-faint);

  /* Iki kolonlu form izgarasi */
  }
  .field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-8);

  }
  .field-grid>.field {
    margin-block-start: 0;

  }
  .field-grid .field--full {
    grid-column: 1 / -1;

  }
  @media (max-width: 44rem) {
    .field-grid {
      grid-template-columns: minmax(0, 1fr);
    }

  /* ---------------------------------------------------------------------------
 * Segment radyolari — zaman araligi. Dropdown degil: mobilde daha az dokunus.
 * ------------------------------------------------------------------------ */

  }
  .segments {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border: var(--border-hair);
    border-radius: var(--r-1);
    overflow: hidden;

  }
  .segments__item {
    position: relative;

  }
  .segments__item+.segments__item {
    border-inline-start: var(--border-hair);

  }
  .segments__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;

  }
  .segments__label {
    display: block;
    padding: var(--s-3) var(--s-2);
    text-align: center;
    font-size: var(--t-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

  }
  .segments__input:hover+.segments__label {
    background: var(--sand-50);

  }
  .segments__input:checked+.segments__label {
    background: var(--sage-600);
    color: #fff;
    font-weight: 500;

  }
  .segments__input:focus-visible+.segments__label {
    outline: var(--bw-mark) solid var(--sage-600);
    outline-offset: -3px;

  }
  @media (max-width: 40rem) {
    .segments {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segments__item:nth-child(odd) {
      border-inline-start: 0;
    }

    .segments__item:nth-child(n + 3) {
      border-block-start: var(--border-hair);
    }

    /* 5 secenek 2 kolona bolununce sonuncusu tek basina yarim kaliyordu */
    .segments__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

  /* ---------------------------------------------------------------------------
 * Onay kutusu — KVKK riza
 * ------------------------------------------------------------------------ */

  }
  .check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    cursor: pointer;

  }
  .check__input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.15rem 0 0;
    accent-color: var(--sage-600);
    cursor: pointer;
    flex: none;

  }
  .check__text {
    
    line-height: var(--lh-normal);
    color: var(--text-muted);

  /* Bal kupu — bot tuzagi. display:none DEGIL (bazi botlar bunu atlar). */
  }
  .honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;

  /* ---------------------------------------------------------------------------
 * Randevu formu — bolunmus panel
 * ------------------------------------------------------------------------ */

  }
  .split-form {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
    border: var(--border-hair);

  }
  .split-form__aside {
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    background: var(--sage-900);
    color: var(--sand-200);

  }
  .split-form__aside .contact-line {
    color: var(--sand-300);

  }
  .split-form__aside .contact-line .icon {
    color: var(--sand-500);

  }
  .split-form__aside .contact-line__label {
    color: var(--sand-600);

  }
  .split-form__aside a.contact-line:hover {
    color: #fff;

  }
  .split-form__aside .contact-line--soon {
    color: var(--sand-600);

  }
  .split-form__main {
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    background: var(--paper);

  }
  @media (max-width: 60rem) {
    .split-form {
      grid-template-columns: minmax(0, 1fr);
    }

  
/* ===========================================================================
 * ⑩ BLOG INDEKSI — dergi icindekiler sayfasi
 * ======================================================================== */

  }
  .post-row {
    position: relative;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 9rem;
    gap: var(--s-8);
    align-items: baseline;
    padding-block: var(--s-6);
    transition: background-color var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .post-row:hover {
      background: var(--sand-50);
    }

  }
  .post-row__date {
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;

  }
  .post-row__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--ink-900);
    transition: transform var(--dur) var(--ease-out);

  }
  .post-row__title a {
    color: inherit;
    text-decoration: none;

  }
  .post-row__title a::after {
    content: '';
    position: absolute;
    inset: 0;

  }
  @media (hover: hover) {
    .post-row:hover .post-row__title {
      transform: translateX(4px);
    }

  }
  .post-row__excerpt {
    margin-block-start: var(--s-2);
    
    font-weight: 300;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

  }
  .post-row__cat {
    text-align: end;
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--sage-600);

  }
  @media (max-width: 54rem) {
    .post-row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-2);
    }

    .post-row__cat {
      text-align: start;
    }

  /* Filtre baglantilari */
  }
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    padding-block-end: var(--s-5);
    border-block-end: var(--border-hair);

  }
  .filter-bar__link {
    padding-block-end: var(--s-2);
    border-block-end: var(--bw-mark) solid transparent;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);

  }
  .filter-bar__link:hover {
    color: var(--text-strong);

  }
  .filter-bar__link[aria-current] {
    color: var(--sage-700);
    border-block-end-color: var(--sage-500);

  
/* ===========================================================================
 * ⑪ SSS — native <details>, SIFIR chrome. JS kapaliyken calisir.
 * ======================================================================== */

  }
  .faq-item {
    border-block-end: var(--border-hair);

  }
  .faq-item__summary {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
    gap: var(--s-4);
    align-items: start;
    padding-block: var(--s-5);
    cursor: pointer;
    list-style: none;

  }
  .faq-item__summary::-webkit-details-marker {
    display: none;

  }
  .faq-item__summary::marker {
    content: '';

  }
  .faq-item__index {
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--tr-eyebrow);
    color: var(--sage-400);
    line-height: 1.9;
    font-variant-numeric: tabular-nums;

  }
  .faq-item__q {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink-900);
    line-height: var(--lh-snug);

  /* + / − isareti: iki 1px span'den kurulur */
  }
  .faq-item__sign {
    position: relative;
    width: 16px;
    height: 16px;
    margin-block-start: 0.4em;
    justify-self: end;

  }
  .faq-item__sign::before,
  .faq-item__sign::after {
    content: '';
    position: absolute;
    background: var(--sage-600);
    transition: transform var(--dur) var(--ease-out);

  }
  .faq-item__sign::before {
    inset-block-start: 50%;
    inset-inline: 0;
    height: 1px;

  }
  .faq-item__sign::after {
    inset-inline-start: 50%;
    inset-block: 0;
    width: 1px;

  }
  .faq-item[open] .faq-item__sign::after {
    transform: scaleY(0);

  }
  .faq-item__answer {
    padding: 0 var(--s-8) var(--s-6) 3rem;
    max-width: var(--measure);
    font-size: var(--t-base);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);

  }
  .faq-item__answer>*+* {
    margin-block-start: var(--s-4);

  }
  @media (max-width: 40rem) {
    .faq-item__summary {
      grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
      gap: var(--s-3);
    }

    .faq-item__answer {
      padding-inline: 0 var(--s-4);
      padding-inline-start: 2rem;
    }

  
/* ===========================================================================
 * Süreç Bölümü — Modern 4 Adımlı Kart Tasarımı
 * ======================================================================== */

  }
  .section--contour {
    background-color: var(--sand-50);
    background-image: none;

  }
  .process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
    position: relative;
    margin-block-start: var(--s-8);
    padding: 0;
    list-style: none;

  }
  .process::before {
    display: none;

  }
  .process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    padding: var(--s-8) var(--s-6);
    border-radius: var(--r-3);
    border: 1px solid var(--sage-200);
    box-shadow: 0 4px 16px rgba(44, 53, 47, 0.04);
    transition: transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out);

  }
  .process__step::before {
    display: none;

  }
  @media (hover: hover) {
    .process__step:hover {
      transform: translateY(-4px);
      border-color: var(--sage-400);
      box-shadow: 0 12px 28px rgba(44, 53, 47, 0.08);
    }

  }
  .process__step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--s-6);

  }
  .process__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--sage-50);
    border: 1px solid var(--sage-200);
    border-radius: var(--r-2);
    color: var(--sage-700);
    transition: background-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);

  }
  .process__icon .icon {
    width: 1.5rem;
    height: 1.5rem;

  }
  @media (hover: hover) {
    .process__step:hover .process__icon {
      background: var(--sage-600);
      border-color: var(--sage-600);
      color: #ffffff;
    }

  }
  .process__num {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    color: var(--sage-700);
    background: var(--sand-100);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;

  }
  .process__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: var(--ink-900);
    margin-block-end: var(--s-3);

  }
  .process__body {
    
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    margin: 0;

  }
  @media (max-width: 64rem) {
    .process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-5);
    }

  }
  @media (max-width: 36rem) {
    .process {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-4);
    }

    .process__step {
      padding: var(--s-6);
    }

  
/* ===========================================================================
 * Ekmek kirintisi
 * ======================================================================== */

  }
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--text-faint);

  }
  .crumbs a {
    display: inline-block;
    padding-block: var(--s-2);
    /* dokunma hedefi 24px+ */
    color: var(--text-faint);
    text-decoration: none;

  }
  .crumbs a:hover {
    color: var(--sage-700);

  }
  .crumbs__sep {
    color: var(--ink-300);

  }
  .crumbs [aria-current] {
    color: var(--sage-700);

  
/* ===========================================================================
 * Sayfalama
 * ======================================================================== */

  }
  .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-block-start: var(--s-16);

  }
  .pager__link {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--s-3);
    border: var(--border-hair);
    border-radius: var(--r-1);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);

  }
  .pager__link:hover {
    border-color: var(--sage-400);
    color: var(--sage-700);

  }
  .pager__link[aria-current] {
    border-color: var(--sage-500);
    box-shadow: 0 0 0 1px var(--sage-500), 0 4px 12px rgba(0, 0, 0, 0.05);
    background: var(--sage-600);
    color: #fff;

  }
  .pager__gap {
    padding-inline: var(--s-2);
    color: var(--ink-400);

  
/* ===========================================================================
 * Galeri + lightbox
 * ======================================================================== */

  }
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--s-4);

  }
  .gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-1);
    background: var(--sand-100);
    cursor: zoom-in;

  }
  .gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity var(--dur) var(--ease-out);

  }
  @media (hover: hover) {
    .gallery__item:hover img {
      opacity: 0.88;
    }

  }
  .gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgb(0 0 0 / 0.06);
    pointer-events: none;

  }
  .gallery__caption {
    margin-block-start: var(--s-3);
    font-size: var(--t-xs);
    color: var(--text-faint);

  }
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: rgb(27 30 33 / 0.94);

  }
  .lightbox[hidden] {
    display: none;

  }
  .lightbox__img {
    max-width: min(96vw, 1400px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: var(--sh-modal);

  }
  .lightbox__caption {
    margin-block-start: var(--s-5);
    max-width: 60ch;
    text-align: center;
    
    color: var(--sand-400);

  }
  .lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--sand-300);
    transition: color var(--dur-fast) var(--ease-out);

  }
  .lightbox__btn:hover {
    color: #fff;

  }
  .lightbox__btn .icon {
    width: 1.5rem;
    height: 1.5rem;

  }
  .lightbox__close {
    inset-block-start: var(--s-4);
    inset-inline-end: var(--s-4);

  }
  .lightbox__prev {
    inset-inline-start: var(--s-4);

  }
  .lightbox__next {
    inset-inline-end: var(--s-4);

  
/* ===========================================================================
 * Bildirimler
 * ======================================================================== */

  }
  .flash {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-inline-start: var(--bw-slab) solid var(--info);
    background: var(--sand-50);
    
    color: var(--text);

  }
  .flash+.flash {
    margin-block-start: var(--s-3);

  }
  .flash .icon {
    margin-block-start: 0.15em;
    color: var(--info);

  }
  .flash--success {
    border-inline-start-color: var(--ok);
    background: #F2F6F3;

  }
  .flash--success .icon {
    color: var(--ok);

  }
  .flash--error {
    border-inline-start-color: var(--err);
    background: #FAF3F2;

  }
  .flash--error .icon {
    color: var(--err);

  }
  .flash--warning {
    border-inline-start-color: var(--warn);
    background: #FBF7EE;

  }
  .flash--warning .icon {
    color: var(--warn);

  /* Bos durum */
  }
  .empty-state {
    padding: var(--s-16) var(--s-6);
    text-align: center;
    border: var(--bw-hair) dashed var(--rule);
    border-radius: var(--r-1);
    color: var(--text-faint);

  }
  .empty-state .icon {
    width: 2rem;
    height: 2rem;
    margin-inline: auto;
    margin-block-end: var(--s-4);
    color: var(--ink-300);

  
/* ===========================================================================
 * Cerez bildirimi
 * ======================================================================== */

  }
  .cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-overlay);
    padding: var(--s-5) 0;
    background: var(--sage-950);
    color: var(--sand-300);
    border-block-start: var(--bw-hair) solid var(--sage-800);

  }
  .cookie-banner[hidden] {
    display: none;

  }
  .cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;

  }
  .cookie-banner p {
    max-width: 68ch;
    
    line-height: var(--lh-normal);

  /* Mobilde bant ekranin ~%30'unu kapliyordu */
  }
  @media (max-width: 44rem) {
    .cookie-banner {
      padding: var(--s-4) 0;
    }

    .cookie-banner__inner {
      gap: var(--s-3);
    }

    .cookie-banner p {
      font-size: var(--t-xs);
    }

    .cookie-banner .btn {
      width: 100%;
    }

  }
  .cookie-banner a {
    color: var(--sand-200);
    text-decoration: underline;

  
/* ===========================================================================
 * Harita gomme — sabit oran, CLS yok
 * ======================================================================== */

  }
  .map-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sand-100);
    border: var(--border-hair);
    overflow: hidden;

  }
  .map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.35) contrast(1.05);

  }
  @media (max-width: 44rem) {
    .map-embed {
      aspect-ratio: 4 / 3;
    }

  
/* ===========================================================================
 * Ozel bolum — sicak kum zeminli blok (Hakkimizda vb.)
 * ======================================================================== */

  }
  .panel-sand {
    padding: clamp(2rem, 1.5rem + 3vw, 4rem);
    background: var(--sand-100);

  }
  .panel-dark {
    padding: clamp(2rem, 1.5rem + 3vw, 4rem);
    background: var(--sage-900);
    color: var(--sand-200);

  }
  .panel-dark h2,
  .panel-dark h3 {
    color: var(--sand-200);

  }
  .panel-dark p {
    color: var(--sand-400);

  
/* ===========================================================================
 * Gorunurluk animasyonu — yalnizca opacity + 8px translate
 * app.js prefers-reduced-motion altinda observer'i HIC kurmaz.
 * ======================================================================== */

  /* FAIL-SAFE: icerik VARSAYILAN OLARAK GORUNUR.
   Onceden .reveal { opacity: 0 } idi ve JS onu aciyordu; app.js ilk satirda
   .no-js sinifini kaldirdigi icin sonrasindaki HERHANGI bir JS hatasi
   icerigi kalici olarak gorunmez birakiyordu.
   Artik gizleme, ancak JS observer'i basariyla kurup <html>'e .reveal-ready
   ekledigi zaman uygulanir. */
  }
  .reveal {
    transition: opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);

  }
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(8px);

  }
  .reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;

  }
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }


  /* Hero gorseli henuz yokken — duz, marka paletinde kompozisyon.
   Gercek fotograf assets/img/content/hero.jpg olarak konunca devreye girer. */
  }
  .hero__frame--placeholder .hero__placeholder {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    background: var(--sand-100);
    border: var(--border-hair);
    border-radius: var(--r-1);

  }
  .hero__frame--placeholder .hero__placeholder img {
    width: 55%;
    height: auto;
    opacity: 0.9;

  /* Mobil override BURADA olmak zorunda: bu kurallar dosyanin ilerisinde
   tanimlandigi icin, hero bolumundeki media query (bkz. "Mobilde hero
   gorseli") ayni ozgullukte olmasina ragmen kaynak sirasi nedeniyle
   eziliyordu. Yer tutucu 4:5 oranda tam ekran kapliyordu. */
  }
  @media (max-width: 44rem) {
    .hero__frame--placeholder .hero__placeholder {
      aspect-ratio: 16 / 10;
    }

    .hero__frame--placeholder .hero__placeholder img {
      width: 34%;
    }

  }
  .hero__frame--placeholder::after {
    inset: 20px;
    border-color: rgb(93 112 86 / 0.14);


  /* Uzman detay sayfasindaki profil gorseli / monogram */
  }
  .profile-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-1);

  .profile-photo
  /* ---------------------------------------------------------------------------
 * Yan ray bag listesi — hizmet detayindaki "diger hizmetler", uzman
 * detayindaki "verdigi hizmetler", blog detayindaki "ilgili yazilar".
 * Onceden view'larda satir ici stille yaziliyordu; dokunma hedefi 21px
 * kaliyordu (WCAG 2.5.8 esigi 24px).
 * ------------------------------------------------------------------------ */

  }
  .rail-list {
    list-style: none;
    margin: 0;
    padding: 0;

  }
  .rail-list__link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 2.75rem;
    padding-block: var(--s-3);
    border-block-end: var(--border-hair);
    
    color: var(--text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);

  }
  .rail-list__link:hover {
    color: var(--sage-700);

  }
  .rail-list__link .icon {
    color: var(--sage-600);
    flex: none;

  }
  .rail-list__link--stacked {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-base);
    color: var(--ink-900);
    line-height: var(--lh-snug);

  }
  .rail-head {
    margin-block-end: var(--s-4);
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);

    .rail-list__link:hover {
      color: var(--sage-700);
    }

    .rail-list__link .icon {
      color: var(--sage-600);
      flex: none;
    }

    .rail-list__link--stacked {
      display: block;
      font-family: var(--font-display);
      font-size: var(--t-base);
      color: var(--ink-900);
      line-height: var(--lh-snug);
    }

    .rail-head {
      margin-block-end: var(--s-4);
      font-size: var(--t-2xs);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: var(--tr-eyebrow);
      color: var(--text-faint);
    }


  
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;

  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;

  }
  .lenis.lenis-stopped {
    overflow: hidden;

  
/* ===========================================================================
 * GSAP yüklendiğinde overflow:hidden olan container'lar için
 * ======================================================================== */
  }
  .svc__media,
  .person__media {
    overflow: hidden;

  /* Ek Randevu Modalı Stilleri (Minimal & Centered) */
  }
  }