/**
 * NECOX — Parca Semasi (Ekspertiz) durum stilleri
 *
 * inc/cf/parca-sema-svg.php'nin dondurdugu inline SVG'yi boyar. Sema HEM
 * ilan-ver formunda HEM ilan detayinda ayni isaretlemeyle gorunur; bu yuzden
 * tum renk/durum kurallari TEK dosyada tutuluyor (bilesen birden fazla yerde
 * render edilip CSS tek yerde enqueue edilirse bir yuzeyde tamamen bozuk
 * gorunur — bu temada yasanmis bir hata sinifi).
 *
 * Renk katmanlari:
 *   1) --necox-pd-*  : varsa yonetici/panel degeri (en yuksek oncelik)
 *   2) --necox-*      : temanin semantik token'lari (warning/info/danger/muted)
 *   3) sabit hex      : token hic basilmazsa son caresi
 *
 * ⚠ color-mix() icinde YALNIZ duz renk tasiyan token kullaniliyor
 * (--necox-muted, --necox-text). --necox-bg / --necox-card-bg gradient
 * TASIYABILIR ve gradient color-mix'e girerse bildirim komple duser.
 *
 * @file       parca-sema.css
 * @component  Parca Semasi (CF)
 * @since      8.3.618
 */

/* ── Sema kabugu + renk degiskenleri ── */
.pd-sema {
    display: block;
    width: 100%;
    height: auto;
    /* Taban gorsel kapali-kapili ustten gorunum => en/boy 1:2,2 (dar ve uzun).
       420px genislik 924px yukseklik ederdi; bu yuzden varsayilan 280px
       (~616px yuksek). Gorev 3 gerekirse --pd-sema-max-width ile ezebilir,
       ⚠ ama 250px'in altina inerse dokunmatik hedef 40px esiginin altina duser
       (olculdu: 280px'te en kucuk hit kenari 46 CSS px). */
    max-width: var(--pd-sema-max-width, 280px);
    margin-inline: auto;

    --pd-orijinal: var(--necox-pd-orijinal, color-mix(in srgb, var(--necox-muted, #6A6A6A) 40%, transparent));
    --pd-lokal:    var(--necox-pd-lokal,    var(--necox-warning, #d97706));
    --pd-boyali:   var(--necox-pd-boyali,   var(--necox-info,    #0284c7));
    --pd-degisen:  var(--necox-pd-degisen,  var(--necox-danger,  #d54b4f));

    --pd-cizgi:    var(--necox-pd-cizgi,    color-mix(in srgb, var(--necox-text, #2A3254) 24%, transparent));
    /* ⚠ Cam YARI SAYDAM olmali. Taban gorselin on/arka cami tavan ve bagaj
       bolgelerinin buyuk kismini kapliyor; opak beyazken (.86) o iki parcanin
       DURUM RENGI gorunmuyordu (ekran goruntusuyle goruldu). .42'de durum rengi
       camin altindan okunuyor, cam da konturuyla yine "cam" gibi duruyor. */
    --pd-cam:      var(--necox-pd-cam,      rgba(255, 255, 255, .42));
    --pd-teker:    var(--necox-pd-teker,    color-mix(in srgb, var(--necox-text, #2A3254) 45%, transparent));
    /* Govde dis hatti: parca dikislerinden daha KOYU/kalin olmali ki aracin
       silueti one cikssin (taban gorsel profesyonel, hat onu tasiyor). */
    --pd-hat:      var(--necox-pd-hat,      color-mix(in srgb, var(--necox-text, #2A3254) 62%, transparent));
}

/* ── Parcalar: taban durum = Orijinal ── */
.pd-sema .pd-parca {
    fill: var(--pd-orijinal);
    stroke: var(--pd-cizgi);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill .16s ease;
}

.pd-sema .pd-parca.pd--orijinal { fill: var(--pd-orijinal); }
.pd-sema .pd-parca.pd--lokal    { fill: var(--pd-lokal); }
.pd-sema .pd-parca.pd--boyali   { fill: var(--pd-boyali); }
.pd-sema .pd-parca.pd--degisen  { fill: var(--pd-degisen); }

/* ── Dekor (cam, lamba, plaka, teker): asla tiklanmaz ── */
.pd-sema .pd-dekor { pointer-events: none; }

.pd-sema .pd-cam {
    fill: var(--pd-cam);
    stroke: var(--pd-cizgi);
    stroke-width: 1;
}

.pd-sema .pd-lamba,
.pd-sema .pd-plaka {
    fill: var(--pd-cam);
    stroke: var(--pd-cizgi);
    stroke-width: 1;
    opacity: .75;
}

/* ── Farlar (on) ve stop lambalari (arka) ──
   Dekor: .pd-dekor icinde yasarlar => pointer-events:none, tiklanmazlar ve
   hit-path'lerin ALTINDA kalirlar (isabet olcumu etkilenmez).
   ⚠ Kendi SABIT renklerini tasirlar, durum degiskenlerine baglanmazlar: lamba
   tamponun durum rengiyle birlikte degisirse "lamba" olarak okunmaz. Ama tamponun
   dort durumundan (gri / turuncu / mavi / kirmizi) ayirt edilebilmeleri gerekir. */
/* ⚠ Lamba konturu --pd-hat DEGIL: --pd-hat yari saydam (text %62 + transparent),
   yani tamponun DURUM RENGINI iceri sizdiriyor — turuncu tamponda kontur kahve
   (130,90,54) oluyor ve sinir kayboluyordu (olculdu: kontur/tampon 1,66-2,35).
   Lambanin konturu OPAK olmali; kalinlik da 1.5 -> 2, cunku 280px genislikte
   1.5 kullanici birimi ~1,2 CSS px'e denk gelip antialiasing'de eriyor. */
.pd-sema .pd-far,
.pd-sema .pd-stop {
    stroke: var(--necox-pd-lamba-kontur, var(--necox-text, #2A3254));
    stroke-width: 2;
}

.pd-sema .pd-far {
    /* Beyaz-krem lens: dort durum dolgusunun hepsinden acik => her durumda okunur. */
    fill: var(--necox-pd-far, rgba(255, 252, 235, .92));
}

.pd-sema .pd-stop {
    /* Koyu kirmizi lens: "Degisen" durumunun kirmizisindan (#d54b4f) belirgin
       koyu, uzerine koyu kontur => kirmizi tampon uzerinde de sinir okunur. */
    fill: var(--necox-pd-stop, #9c1c14);
}

/* Geri vites segmenti: stop lambasini "Degisen" (kirmizi tampon) durumunda da
   ayirt eden acik leke — tek parcali kirmizi lens o durumda kayboluyordu. */
.pd-sema .pd-stop-ic {
    fill: var(--necox-pd-stop-ic, rgba(255, 252, 235, .9));
    stroke: none;
}

/* Kapinin ic kenarindaki cam seridi — kapiyi "kapi" yapan isaret
   (referans semada da kapilarin ic kenarinda bu serit var). */
.pd-sema .pd-camcizgi {
    fill: var(--pd-cam);
    stroke: var(--pd-cizgi);
    stroke-width: 1;
}

.pd-sema .pd-teker {
    fill: var(--pd-teker);
    stroke: none;
}

/* Govdenin dis hatti — taban gorselin kendi silueti, parcalarin USTUNE cizilir
   ki durum renkleri degistiginde arac hatti hep okunur kalsin. */
.pd-sema .pd-govde-hat {
    fill: none;
    stroke: var(--pd-hat);
    stroke-width: 2.5;
}

/* Yan aynalar: govde disinda kaldiklari icin bolgeye giremezler => dekor. */
.pd-sema .pd-ayna {
    fill: var(--pd-orijinal);
    stroke: var(--pd-hat);
    stroke-width: 1.5;
}

/* Arka lamba / plaka kumesi (taban gorselden gelen ince detay). */
.pd-sema .pd-detay {
    fill: none;
    stroke: var(--pd-cizgi);
    stroke-width: 1.2;
}

/* ── Tiklama alanlari: gorunmez, gorunur sekilden BUYUK ── */
.pd-sema .pd-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    /* fill:transparent tek basina isabet icin yeterli olmali, ama tarayici
       farkina birakmamak icin acikca isaretliyoruz. */
    pointer-events: all;
    transition: fill .12s ease;
}

.pd-sema .pd-hit:hover {
    fill: color-mix(in srgb, var(--necox-text, #2A3254) 8%, transparent);
}

.pd-sema .pd-hit:focus-visible {
    fill: color-mix(in srgb, var(--necox-text, #2A3254) 10%, transparent);
    outline: 2px solid var(--necox-info, #0284c7);
    outline-offset: 1px;
}

/* Salt-okunur baglam (ilan detayi): imlec ve vurgu yok. */
.pd-sema.pd-sema--statik .pd-hit {
    cursor: default;
    pointer-events: none;
}

/* ── Rozet yuvasi (LB / B / D) — JS bu gruba basar ──
   Rozet zemini durum renginin %80'i + %20 siyah. Oran UYDURULMADI, olculdu:
   rozet yazisi kucuk metin sinifinda (22 kullanici birimi ≈ 12 CSS px) oldugu
   icin beyaz yazi 4.5:1 ister; %88'de turuncu rozet 4.02'de KALIYORDU (esigin
   altinda), %80'de uc durum da gecer — olculen degerler task-2 raporunda. */
.pd-sema .pd-rozet__zemin {
    stroke: none;
}

.pd-sema .pd-rozet--lokal   .pd-rozet__zemin { fill: color-mix(in srgb, var(--pd-lokal)   80%, #000); }
.pd-sema .pd-rozet--boyali  .pd-rozet__zemin { fill: color-mix(in srgb, var(--pd-boyali)  80%, #000); }
.pd-sema .pd-rozet--degisen .pd-rozet__zemin { fill: color-mix(in srgb, var(--pd-degisen) 80%, #000); }

.pd-sema .pd-rozet__yazi {
    fill: #fff;
    font-family: var(--necox-font-body, system-ui, -apple-system, sans-serif);
    font-size: 22px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* ── Renk lejanti (sema ustu tek satir) ── */
.pd-lejant {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    /* Ogeler iki satirli (etiket + aciklama) ve dar ekranda aciklama sarabilir
       => farkli yukseklikler; center olsaydi kutular birbirine gore kayardi. */
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--necox-muted, #6A6A6A);
}

.pd-lejant__oge {
    display: inline-flex;
    /* Aciklama satiri eklendigi icin ogeler artik IKI satirli olabilir; center
       kalsaydi renk kutusu iki satirin ortasinda yuzerdi. flex-start + kutuya
       kucuk ust payi = kutu her zaman ETIKET satiriyla hizali. */
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}

.pd-lejant__kutu {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--pd-orijinal, rgba(106, 106, 106, .4));
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Etiket + aciklama dikey yigin */
.pd-lejant__metin {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* ⭐ Aciklama SOLUK ve KUCUK: lejanti bogmamali.
   ⚠ Renk --necox-muted; bu temada "--necox-text-soft" diye bir token YOK
   (inc/ altinda 0 tanim), soluk ton tokeni --necox-muted (fonts.php:1027'de
   K1 paletinden basiliyor). Ustelik .pd-lejant__oge--* kurallari ogenin
   rengini DURUM RENGINE cekiyor; aciklama onu miras alsaydi turuncu/kirmizi
   kucuk metin cikardi (kucuk metin kontrast esigi 4,5). */
.pd-lejant__aciklama {
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--necox-muted, #6A6A6A);
}

.pd-lejant__oge--lokal   .pd-lejant__kutu { background: var(--pd-lokal,   #d97706); }
.pd-lejant__oge--boyali  .pd-lejant__kutu { background: var(--pd-boyali,  #0284c7); }
.pd-lejant__oge--degisen .pd-lejant__kutu { background: var(--pd-degisen, #d54b4f); }

.pd-lejant__oge--lokal   { color: var(--pd-lokal,   #d97706); }
.pd-lejant__oge--boyali  { color: var(--pd-boyali,  #0284c7); }
.pd-lejant__oge--degisen { color: var(--pd-degisen, #d54b4f); }

/* Lejant kendi basina kullanilinca da renkleri bilsin (sema kabugu disinda). */
.pd-lejant {
    --pd-orijinal: var(--necox-pd-orijinal, color-mix(in srgb, var(--necox-muted, #6A6A6A) 40%, transparent));
    --pd-lokal:    var(--necox-pd-lokal,    var(--necox-warning, #d97706));
    --pd-boyali:   var(--necox-pd-boyali,   var(--necox-info,    #0284c7));
    --pd-degisen:  var(--necox-pd-degisen,  var(--necox-danger,  #d54b4f));
}

/* ── Dar ekran: dokunmatik hedefi korumak icin sema kuculmez ── */
@media (max-width: 480px) {
    .pd-sema {
        max-width: var(--pd-sema-max-width-mobil, 360px);
    }
}

/* ══════════════════════════════════════════════════════════════════
   GOREV 3 — FORM (ilan-ver) + ILAN DETAY KABUKLARI
   Yukaridaki bloklar (sema/dekor/hit/rozet/lejant) DEGISTIRILMEDI;
   asagisi yalnizca EKtir. Ayni dosyada tutuluyor ki bilesenin tum
   stili tek yerden enqueue edilsin (iki yuzey: ilan-ver + ilan detayi).
   ══════════════════════════════════════════════════════════════════ */

/* Durum renkleri kabuklarda da tanimli olmali: cipler ve liste noktalari
   .pd-sema'nin DISINDA yasiyor, oradaki tanimi miras alamazlar. */
.necox-pd,
.necox-pd-detay {
    --pd-orijinal: var(--necox-pd-orijinal, color-mix(in srgb, var(--necox-muted, #6A6A6A) 40%, transparent));
    --pd-lokal:    var(--necox-pd-lokal,    var(--necox-warning, #d97706));
    --pd-boyali:   var(--necox-pd-boyali,   var(--necox-info,    #0284c7));
    --pd-degisen:  var(--necox-pd-degisen,  var(--necox-danger,  #d54b4f));
}

/* ── Form kabugu ── */
.necox-pd__yonerge {
    margin: 2px 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--necox-muted, #6A6A6A);
}

/* ── Toplu islem satiri ("Tümüne uygula") ──
   13 parcayi tek tek tiklamak zorunda kalmamak icin (kullanici 26 Tem talebi).
   Cip deseniyle AYNI dili konusur: hap seklinde gercek <button>, renkli nokta,
   durum rengiyle %12 zemin. Boylece kullanici ikisini ayni ailenin parcasi
   olarak okur, ama etiket ("Tümüne uygula:") eylemi belirsiz birakmaz. */
.necox-pd__toplu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 12px;
}

.necox-pd__toplu-etiket {
    font-size: 13px;
    color: var(--necox-muted, #6A6A6A);
    flex: 0 0 auto;
}

.necox-pd__toplu-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.necox-pd-toplu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    /* Dokunmatik hedef: 34px cip deseniyle ayni (aralarinda 6px bosluk var). */
    min-height: 34px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--necox-text, #2A3254);
    background: var(--pd-toplu-zemin, transparent);
    border: 1px solid var(--pd-toplu-cizgi, var(--necox-border, #EAEAEA));
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--necox-transition, .2s ease), border-color var(--necox-transition, .2s ease);
}

.necox-pd-toplu-btn__nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pd-toplu-renk, var(--pd-orijinal));
    flex: 0 0 auto;
}

.necox-pd-toplu-btn--orijinal { --pd-toplu-renk: var(--pd-orijinal); }
.necox-pd-toplu-btn--lokal    { --pd-toplu-renk: var(--pd-lokal); }
.necox-pd-toplu-btn--boyali   { --pd-toplu-renk: var(--pd-boyali); }
.necox-pd-toplu-btn--degisen  { --pd-toplu-renk: var(--pd-degisen); }

.necox-pd-toplu-btn--lokal,
.necox-pd-toplu-btn--boyali,
.necox-pd-toplu-btn--degisen {
    --pd-toplu-zemin: color-mix(in srgb, var(--pd-toplu-renk) 12%, transparent);
    --pd-toplu-cizgi: color-mix(in srgb, var(--pd-toplu-renk) 45%, transparent);
}

.necox-pd-toplu-btn:hover {
    --pd-toplu-zemin: color-mix(in srgb, var(--pd-toplu-renk) 22%, transparent);
}

.necox-pd-toplu-btn:focus-visible {
    outline: 2px solid var(--necox-info, #0284c7);
    outline-offset: 2px;
}

.necox-pd__sema {
    margin: 0 0 12px;
}

/* ── Ozet cipleri ── */
.necox-pd__cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    align-items: center;
}

.necox-pd__bos {
    font-size: 13px;
    color: var(--necox-muted, #6A6A6A);
}

/* Cip bir <button>: odaklanabilirlik ve Enter/Space davranisi bedava gelir.
   ⚠ Metin rengi durum rengi DEGIL --necox-text: turuncu (#d97706) beyaz zeminde
   3,2:1 kaliyor = kucuk metin esigi 4,5'in altinda. Durum bilgisi zaten hem
   yazida ("Kaput — Boyalı") hem renkli noktada tasiniyor. */
.necox-pd-cip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    min-height: 34px;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--necox-text, #2A3254);
    background: var(--pd-cip-zemin, transparent);
    border: 1px solid var(--pd-cip-cizgi, var(--necox-border, #EAEAEA));
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--necox-transition, .2s ease), border-color var(--necox-transition, .2s ease);
}

.necox-pd-cip::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pd-cip-renk, var(--pd-orijinal));
    flex: 0 0 auto;
}

.necox-pd-cip--lokal   { --pd-cip-renk: var(--pd-lokal); }
.necox-pd-cip--boyali  { --pd-cip-renk: var(--pd-boyali); }
.necox-pd-cip--degisen { --pd-cip-renk: var(--pd-degisen); }

.necox-pd-cip--lokal,
.necox-pd-cip--boyali,
.necox-pd-cip--degisen {
    --pd-cip-zemin: color-mix(in srgb, var(--pd-cip-renk) 12%, transparent);
    --pd-cip-cizgi: color-mix(in srgb, var(--pd-cip-renk) 45%, transparent);
}

.necox-pd-cip:hover {
    --pd-cip-zemin: color-mix(in srgb, var(--pd-cip-renk) 20%, transparent);
}

.necox-pd-cip:focus-visible {
    outline: 2px solid var(--necox-info, #0284c7);
    outline-offset: 2px;
}

.necox-pd-cip__x {
    font-size: 16px;
    line-height: 1;
    color: var(--necox-muted, #6A6A6A);
}

.necox-pd-cip:hover .necox-pd-cip__x {
    color: var(--necox-text, #2A3254);
}

/* ══════════════════════════════════════════════════════════════════
   ILAN DETAYI — salt-goruntu sema + durum listeleri
   ══════════════════════════════════════════════════════════════════ */

.necox-pd-detay {
    margin-top: 18px;
}

.necox-pd-detay__baslik {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: var(--necox-heading-weight, 600);
    color: var(--necox-heading, #2A3254);
}

.necox-pd-detay__grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.necox-pd-detay__listeler {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.necox-pd-liste__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--necox-text, #2A3254);
}

.necox-pd-liste__nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pd-liste-renk, var(--pd-orijinal));
    flex: 0 0 auto;
}

.necox-pd-liste--lokal   { --pd-liste-renk: var(--pd-lokal); }
.necox-pd-liste--boyali  { --pd-liste-renk: var(--pd-boyali); }
.necox-pd-liste--degisen { --pd-liste-renk: var(--pd-degisen); }

.necox-pd-liste__sayi {
    font-weight: 400;
    color: var(--necox-muted, #6A6A6A);
}

.necox-pd-liste__ogeler {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--necox-text, #2A3254);
}

/* Hepsi orijinal (tek satir) */
.necox-pd-detay__temiz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--necox-text, #2A3254);
}

.necox-pd-detay__tik {
    color: var(--necox-success, #16a34a);
    font-weight: 700;
}

/* Dar ekran: sema ustte, listeler altta */
@media (max-width: 700px) {
    .necox-pd-detay__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════════════
   ILAN DETAYI — KOMPAKT KUTU + TAM EKRAN KATMANI
   (kullanici 26 Tem: "HARİTA BÜYÜKLÜĞÜNDE bir mockup görünümü olsun,
    kullanıcı tıklarsa TAM EKRAN görebilsin" + "büyük mockup'ın soluna
    sıkışmış yazılar için çok daha iyi alan olur")

   Yukaridaki bloklarin HICBIRI degistirilmedi; asagisi yalnizca EKtir.
   .necox-pd-detay__grid kurallari (eski tek-parca detay duzeni) yerinde
   birakildi: baska bir cagiran ortaya cikarsa calismaya devam eder.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠ Tam ekran katmani ACILIRKEN <body>'ye TASINIR (parca-sema-detay.js):
   ilan detayinda transform/filter tasiyan bir ata position:fixed'i kendi
   kutusuna hapsedebilir. Tasindigi anda .necox-pd-detay'dan miras alinan
   durum renkleri KAYBOLUR -> renk degiskenleri burada YENIDEN tanimlanir
   (cipler, liste noktalari ve lejant onlara bagli). */
.necox-pd-tam {
    --pd-orijinal: var(--necox-pd-orijinal, color-mix(in srgb, var(--necox-muted, #6A6A6A) 40%, transparent));
    --pd-lokal:    var(--necox-pd-lokal,    var(--necox-warning, #d97706));
    --pd-boyali:   var(--necox-pd-boyali,   var(--necox-info,    #0284c7));
    --pd-degisen:  var(--necox-pd-degisen,  var(--necox-danger,  #d54b4f));
}

/* ── Ozet cipleri (sayili): "2 Lokal Boyalı" ──
   ⚠ Renk TEK BASINA bilgi tasimaz — adet + durum adi yazili.
   ⚠ Metin rengi durum rengi DEGIL --necox-text (turuncu #d97706 beyaz zeminde
   3,2:1 = kucuk metin esigi 4,5'in altinda; ayni gerekce .necox-pd-cip'te). */
.necox-pd-ozet-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    min-height: 30px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 999px;
    color: var(--necox-text, #2A3254);
    background: color-mix(in srgb, var(--pd-ozet-renk, var(--pd-orijinal)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pd-ozet-renk, var(--pd-orijinal)) 45%, transparent);
}

/* Renkli nokta: durum listesi basligindaki (.necox-pd-liste__nokta) desenin
   kucugu — kompakt kutu ile tam ekran ayni dili konussun. */
.necox-pd-ozet-cip__nokta {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pd-ozet-renk, var(--pd-orijinal));
    flex: 0 0 auto;
}

.necox-pd-ozet-cip__ad {
    font-weight: 600;
}

.necox-pd-ozet-cip__sayi {
    color: var(--necox-muted, #6A6A6A);
}

.necox-pd-ozet-cip--lokal   { --pd-ozet-renk: var(--pd-lokal); }
.necox-pd-ozet-cip--boyali  { --pd-ozet-renk: var(--pd-boyali); }
.necox-pd-ozet-cip--degisen { --pd-ozet-renk: var(--pd-degisen); }

/* ── Kompakt kutu (varsayilan gorunum) ──
   Yukseklik HARITA bileseninden alindi: single-advert.css:1234
   `.necox-sad__map { height: var(--necox-sad-map-height, 240px) }`.
   ⚠ O degisken haritanin KENDI kuralinda tanimlaniyor (mobilde 405px) =>
   miras alinamaz; bu yuzden ayni tabani kendi degiskenimizle tasiyoruz.
   Panelden harita yuksekligi degistirilirse (--necox-sad-map-height, K2)
   kompakt kutu da onu izler; ayar yoksa 240px = haritanin varsayilani. */
.necox-pd-detay--kompakt {
    --pd-kompakt-y: var(--necox-pd-kompakt-yukseklik, var(--necox-sad-map-height, 240px));
}

.necox-pd-kompakt {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    min-height: var(--pd-kompakt-y);
    padding: 14px;
    font: inherit;
    text-align: left;
    color: var(--necox-text, #2A3254);
    background: transparent;
    border: 1px solid var(--necox-border, #EAEAEA);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--necox-transition, .2s ease), background var(--necox-transition, .2s ease);
}

.necox-pd-kompakt:hover {
    border-color: color-mix(in srgb, var(--necox-text, #2A3254) 30%, transparent);
    background: color-mix(in srgb, var(--necox-text, #2A3254) 3%, transparent);
}

.necox-pd-kompakt:focus-visible {
    outline: 2px solid var(--necox-info, #0284c7);
    outline-offset: 2px;
}

.necox-pd-kompakt__sema {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sema YUKSEKLIGE gore olcekleniyor: viewBox 358.85x789.36 (1:2,2) intrinsic
   orani tasidigi icin width:auto genisligi kendisi hesaplar (~yukseklik/2,2).
   Boylece kutu haritanin yuksekligine oturur, sema tasmaz. */
.necox-pd-kompakt__sema .pd-sema {
    width: auto;
    height: calc(var(--pd-kompakt-y) - 40px);
    max-width: none;
    margin-inline: 0;
}

/* ⛔ Kompakt semada rozet (LB/B/D) GIZLI: ~96px genislikte rozet yazisi
   ~6 CSS px'e duser = okunmaz gorsel gurultu. Bilgi sayili ciplerde. */
.necox-pd-kompakt .pd-rozet {
    display: none;
}

.necox-pd-kompakt__bilgi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.necox-pd-kompakt__ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.necox-pd-kompakt__ipucu {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 8px 14px;
    /* Kutunun tamami tiklanabilir; bu hap "belirgin buton" gorevini gorur.
       36px yukseklik = dokunmatik hedef esigi (kutu zaten cok daha buyuk). */
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--necox-text, #2A3254);
    background: color-mix(in srgb, var(--necox-info, #0284c7) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--necox-info, #0284c7) 42%, transparent);
    border-radius: 999px;
}

.necox-pd-kompakt__ikon {
    color: var(--necox-info, #0284c7);
    flex: 0 0 auto;
}

.necox-pd-kompakt:hover .necox-pd-kompakt__ipucu {
    background: color-mix(in srgb, var(--necox-info, #0284c7) 18%, transparent);
}

/* ── Tam ekran katmani ── */
.necox-pd-tam {
    position: fixed;
    inset: 0;
    z-index: var(--necox-pd-tam-z, 9999);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ⚠ ZORUNLU: display:flex kurali UA'nin `[hidden]{display:none}` kuralini
   ezerdi (ozgulluk 0,1,0 > 0,0,0) ve katman kapaliyken de gorunurdu. */
.necox-pd-tam[hidden] {
    display: none;
}

.necox-pd-tam__perde {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
}

.necox-pd-tam__kutu {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1080px, 100%);
    max-height: min(92vh, 100%);
    /* ⚠ Zemin olarak --necox-card-bg kullanilabilir (gradient TASIYABILIR ama
       burada dogrudan background; color-mix'e SOKULMUYOR — v8.3.540 dersi). */
    background: var(--necox-card-bg, var(--necox-bg, #ffffff));
    color: var(--necox-text, #2A3254);
    border: 1px solid var(--necox-border, #EAEAEA);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.necox-pd-tam__ust {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 16px 62px 14px 20px;
    border-bottom: 1px solid var(--necox-border, #EAEAEA);
}

.necox-pd-tam__baslik {
    margin: 0;
    font-size: 17px;
    font-weight: var(--necox-heading-weight, 600);
    color: var(--necox-heading, #2A3254);
}

.necox-pd-tam__ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.necox-pd-tam__kapat {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 26px;
    line-height: 1;
    color: var(--necox-text, #2A3254);
    background: color-mix(in srgb, var(--necox-text, #2A3254) 7%, transparent);
    border: 1px solid var(--necox-border, #EAEAEA);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--pd-anim-mikro, .18s) ease, background var(--necox-transition, .2s ease);
}

.necox-pd-tam__kapat:hover {
    background: color-mix(in srgb, var(--necox-text, #2A3254) 14%, transparent);
    /* Kullanici istegi (ek talimat 2): hover'da zarif tepki. */
    transform: scale(1.08) rotate(90deg);
}

.necox-pd-tam__kapat:focus-visible {
    outline: 2px solid var(--necox-info, #0284c7);
    outline-offset: 2px;
}

/* ⚠ position:relative ZORUNLU: bu kutu overflow-y:auto ve icinde mutlak
   konumlu torun (rozet/odak halkasi) olusabilir; static kalirsa o torunlar
   kirpilmaz ve UST kaydiriciyi sisirir (v8.3.602'de olculen hata sinifi). */
.necox-pd-tam__govde {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 18px 20px 22px;
    overflow-y: auto;
}

.necox-pd-tam__sema {
    justify-self: center;
}

/* Tam ekranda sema BUYUK ama viewport yuksekligine bagli: 1:2,2 oraninda
   genislik x2,2 = yukseklik oldugu icin dikey tavan genislikten hesaplanir. */
.necox-pd-tam__sema .pd-sema {
    max-width: min(320px, 30vh);
}

.necox-pd-tam__listeler {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Dar/alcak ekran: sema ustte, listeler altta (yan yana sikismasin) */
@media (max-width: 900px) {
    .necox-pd-tam {
        padding: 12px;
    }
    .necox-pd-tam__govde {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .necox-pd-tam__sema .pd-sema {
        max-width: min(260px, 34vh);
    }
    .necox-pd-tam__kutu {
        max-height: 94vh;
    }
}

/* Telefon: sema DAHA DA kucuk. Olculdu (390x844, gercek dokunmatik baglam):
   260px sema = 572px yukseklik ve katmanin govdesinde 263px ic kaydirma
   birakiyordu, yani listelerin tamami "kaydirmadan" gorunmuyordu. 200px'te
   sema ~440px olur ve ilk durum listesi ilk ekranda okunur; rozet yazisi
   200/358,85 = 0,56 olcekte ~12 CSS px = hala okunur. */
@media (max-width: 700px) {
    .necox-pd-tam__sema .pd-sema {
        max-width: min(200px, 26vh);
    }
}

/* Mobil kompakt kutu: harita mobilde 405px'e cikiyor ama 405px'lik bir
   "onizleme" ilan detayini yine sisirirdi — kutu 260px'te tutuldu
   (sema ~110px genislik, cipler icin ~200px kalir @390px). */
@media (max-width: 480px) {
    .necox-pd-detay--kompakt {
        --pd-kompakt-y: var(--necox-pd-kompakt-yukseklik-mobil, 260px);
    }
    .necox-pd-kompakt {
        gap: 12px;
        padding: 12px;
    }
    .necox-pd-kompakt__ipucu {
        font-size: 12.5px;
        padding: 8px 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TAM EKRAN — AÇILIŞ / KAPANIŞ ANİMASYONLARI (v8.3.619)

   Kullanici istegi: popup acilisinda "guzel bir animasyon" + yoneticinin
   panelden secebilecegi 4 tip + kapat dugmesinde mikro-animasyon; kapanis
   acilisin KISA TERSI olsun (sert kaybolma yok).

   ⭐ Tip SUNUCUDA secilir: PHP `necox_parca_sema_anim_tipi()` (option
   `sad_pd_anim`) katmana `.necox-pd-tam--anim-<tip>` sinifini basar.
   JS yalnizca `.is-acilis` / `.is-kapanis` durum sinifini takar — yani
   animasyon secimi onbellekli sayfada da dogrudur.
   ══════════════════════════════════════════════════════════════════ */

.necox-pd-tam {
    --pd-anim-sure: .30s;
    --pd-anim-kapanis: .18s;
    --pd-anim-mikro: .18s;
}

/* Perde her tipte ayni: yumusak karartma (sert siyah "flash" olmasin) */
.necox-pd-tam.is-acilis  .necox-pd-tam__perde { animation: necox-pd-perde-gir var(--pd-anim-sure) ease-out both; }
.necox-pd-tam.is-kapanis .necox-pd-tam__perde { animation: necox-pd-perde-cik var(--pd-anim-kapanis) ease-in both; }

@keyframes necox-pd-perde-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes necox-pd-perde-cik { from { opacity: 1; } to { opacity: 0; } }

/* ── 1) Yumuşak Büyüme (varsayılan) ── */
.necox-pd-tam--anim-buyume.is-acilis  .necox-pd-tam__kutu { animation: necox-pd-buyume-gir var(--pd-anim-sure) cubic-bezier(.2, .8, .25, 1) both; }
.necox-pd-tam--anim-buyume.is-kapanis .necox-pd-tam__kutu { animation: necox-pd-buyume-cik var(--pd-anim-kapanis) ease-in both; }

@keyframes necox-pd-buyume-gir { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes necox-pd-buyume-cik { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }

/* ── 2) Aşağıdan Kayma ── */
.necox-pd-tam--anim-kayma.is-acilis  .necox-pd-tam__kutu { animation: necox-pd-kayma-gir var(--pd-anim-sure) cubic-bezier(.2, .8, .25, 1) both; }
.necox-pd-tam--anim-kayma.is-kapanis .necox-pd-tam__kutu { animation: necox-pd-kayma-cik var(--pd-anim-kapanis) ease-in both; }

@keyframes necox-pd-kayma-gir { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes necox-pd-kayma-cik { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px); } }

/* ── 3) Solarak Belirme ── */
.necox-pd-tam--anim-solma.is-acilis  .necox-pd-tam__kutu { animation: necox-pd-solma-gir var(--pd-anim-sure) ease-out both; }
.necox-pd-tam--anim-solma.is-kapanis .necox-pd-tam__kutu { animation: necox-pd-solma-cik var(--pd-anim-kapanis) ease-in both; }

@keyframes necox-pd-solma-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes necox-pd-solma-cik { from { opacity: 1; } to { opacity: 0; } }

/* ── 4) Perspektif Açılım (3B) ──
   ⚠ `perspective` KATMANA verilir (kutunun kendisine degil): perspective
   ebeveynde tanimlanmadan rotateX derinlik hissi vermez, duz sikisma gorunur. */
.necox-pd-tam--anim-perspektif { perspective: 1400px; }
.necox-pd-tam--anim-perspektif.is-acilis  .necox-pd-tam__kutu { animation: necox-pd-persp-gir calc(var(--pd-anim-sure) + .06s) cubic-bezier(.2, .8, .25, 1) both; }
.necox-pd-tam--anim-perspektif.is-kapanis .necox-pd-tam__kutu { animation: necox-pd-persp-cik var(--pd-anim-kapanis) ease-in both; }

@keyframes necox-pd-persp-gir {
    from { opacity: 0; transform: rotateX(14deg) translateY(28px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes necox-pd-persp-cik {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: rotateX(10deg) translateY(16px) scale(.98); }
}

/* ── Kapat düğmesi mikro-animasyonu (girişte belirme + dönme) ──
   Gecikme, kutu animasyonu yerine oturduktan sonra girsin diye. */
.necox-pd-tam.is-acilis .necox-pd-tam__kapat {
    animation: necox-pd-kapat-gir .34s .10s cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes necox-pd-kapat-gir {
    from { opacity: 0; transform: scale(.55) rotate(-90deg); }
    to   { opacity: 1; transform: none; }
}

/* ── Erişilebilirlik: hareketi azalt ──
   Kullanici isletim sisteminde "hareketi azalt" dediyse ANIMASYON YOK
   (mikro-animasyon ve hover tepkisi de dahil). JS de bu tercihte katmani
   animasyonsuz kapatir; CSS tek basina birakilirsa kapanis beklemesi
   gereksiz gecikme uretirdi. */
@media (prefers-reduced-motion: reduce) {

    .necox-pd-tam.is-acilis  .necox-pd-tam__perde,
    .necox-pd-tam.is-kapanis .necox-pd-tam__perde,
    .necox-pd-tam.is-acilis  .necox-pd-tam__kutu,
    .necox-pd-tam.is-kapanis .necox-pd-tam__kutu,
    .necox-pd-tam.is-acilis  .necox-pd-tam__kapat {
        animation: none !important;
    }

    .necox-pd-tam__kapat,
    .necox-pd-kompakt {
        transition: none;
    }

    .necox-pd-tam__kapat:hover {
        transform: none;
    }
}