/*
 * Zaman serisi grafigi (includes/grafik.php).
 *
 * Renkler sitenin --vurgu mavisinin birer basamak kaydirilmisi ve
 * veri gorsellestirme dogrulayicisindan GECTI: acik temada beyaz,
 * koyu temada #151f30 kart zemini uzerinde parlaklik bandi, doygunluk
 * ve kontrast. --vurgu'nun kendisi kullanilmadi: acik temada bandin
 * binde bir altinda (fazla koyu, siyah gibi okunuyor), koyu temada
 * ustunde (zeminde yikanmis gorunuyor) kaliyordu.
 */

.grafik {
    /* Etiket seyreltmesi ekrana degil GRAFIGIN genisligine bakiyor. */
    container-type: inline-size;

    --grafik-renk:  #205698;
    --grafik-zemin: var(--kart, #ffffff);
    --grafik-izgara: var(--cizgi, #e2e6ec);
    --grafik-yazi:  var(--metin-soluk, #5d6a80);
    --grafik-eksen: var(--metin-soluk, #5d6a80);

    margin: 22px 0 6px;
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    :where(:root:not([data-tema="acik"])) .grafik { --grafik-renk: #5f93da; }
}

:where(:root[data-tema="koyu"]) .grafik { --grafik-renk: #5f93da; }

.grafik [hidden] { display: none !important; }

.grafik-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0 0 14px;
}

.grafik-baslik {
    font-weight: 700;
    font-size: 1rem;
    color: var(--metin, #14213a);
}

.grafik-alt {
    font-size: .86rem;
    color: var(--grafik-yazi);
}

/* Tarih ortadan bolunmesin ("22 Eylul / 2026"). */
.grafik-tarih { white-space: nowrap; }

/*
 * Govde: solda y etiketleri, sagda cizim; alt satirda x etiketleri.
 * Yukseklik CIZIM icin sabit, eksen bandi ayri satirda: sabit
 * yukseklige eksen yazilarini da sigdirmaya calismak kutunun icinde
 * kucuk bir kaydirma cubuguna yol aciyordu.
 */
.grafik-govde {
    display: grid;
    /* 4.4em: imlecin deger etiketi Y ekseninin uzerine sigsin. */
    grid-template-columns: 4.4em 1fr;
    grid-template-rows: 220px auto;
    /* Son noktanin yarisi ve halkasi cizim kutusunun disina tasiyor. */
    padding-right: 8px;
}

.grafik-y {
    position: relative;
    grid-column: 1;
    grid-row: 1;
}

.grafik-y span {
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
    font-size: .8rem;
    line-height: 1;
    color: var(--grafik-yazi);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.grafik-alan {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    /* Eksen cizgileri: hangi eksenin nerede oldugu acik olsun. */
    border-left: 1px solid var(--grafik-eksen);
    border-bottom: 1px solid var(--grafik-eksen);
    /* Dikey kaydirma parmakla calismaya devam etsin, yatay surukleme imleci tasisin. */
    touch-action: pan-y;
    cursor: crosshair;
    outline: none;
    border-radius: 4px;
}

.grafik-alan:focus-visible {
    box-shadow: 0 0 0 2px var(--grafik-zemin), 0 0 0 4px var(--grafik-renk);
}

.grafik-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Izgara: tek piksel, duz, geri planda. Kesikli cizgi "tahmin" gibi okunur. */
.grafik-izgara line {
    stroke: var(--grafik-izgara);
    stroke-width: 1;
}

.grafik-dolgu {
    fill: var(--grafik-renk);
    opacity: .10;
}

/* Ince cizgi (site sahibinin istegi, 23.10.2026): gunluk seride ayrinti
   kalin cizginin altinda kayboluyordu. */
.grafik-cizgi {
    fill: none;
    stroke: var(--grafik-renk);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Isaret: 8px dolu daire + 2px zemin halkasi; cizginin ustunde okunur kalsin. */
.grafik-nokta {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grafik-renk);
    box-shadow: 0 0 0 2px var(--grafik-zemin);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Son deger: yazi rengi metin, veri rengi degil. */
.grafik-son {
    position: absolute;
    transform: translate(calc(-100% - 10px), calc(-100% - 8px));
    font-size: .92rem;
    font-weight: 700;
    color: var(--metin, #14213a);
    white-space: nowrap;
    pointer-events: none;
}

.grafik-son.altta { transform: translate(calc(-100% - 10px), 8px); }

.grafik-imlec,
.grafik-imlec-yatay {
    position: absolute;
    pointer-events: none;
    opacity: .75;
}

/* Arti imlec: KESIKLI dikey ve yatay cizgi (izgaradan ayrilsin diye). */
.grafik-imlec {
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--grafik-yazi);
}

.grafik-imlec-yatay {
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--grafik-yazi);
}

/* Eksen uzerindeki etiketler: deger soldaki Y ekseninde, tarih alttaki
   X ekseninde. Koyu zemin: eksen yazilarindan ayrilsin. */
.grafik-eksen-deger,
.grafik-eksen-tarih {
    position: absolute;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--metin, #14213a);
    color: var(--grafik-zemin);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.grafik-eksen-deger {
    left: 0;
    transform: translate(calc(-100% - 4px), -50%);
}

.grafik-eksen-tarih {
    top: 100%;
    transform: translate(-50%, 5px);
}

.grafik-eksenler {
    flex-basis: 100%;
    font-size: .8rem;
    color: var(--grafik-yazi);
}

/* Eksen isaretleri: etiketin eksene degdigi yer. */
.grafik-y span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 5px;
    border-top: 1px solid var(--grafik-eksen);
}

.grafik-x span::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    height: 5px;
    border-left: 1px solid var(--grafik-eksen);
}

.grafik-x {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    height: 1.9em;
}

.grafik-x span {
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    font-size: .8rem;
    color: var(--grafik-yazi);
    white-space: nowrap;
}

/* Uclardaki etiket kutudan tasmasin. */
.grafik-x span:first-child:not(:only-child) { transform: translateX(-15%); }
.grafik-x span:last-child:not(:only-child)  { transform: translateX(-85%); }

/* Centik etiketin baglandigi noktada kalsin. */
.grafik-x span:first-child:not(:only-child)::before { left: 15%; }
.grafik-x span:last-child:not(:only-child)::before  { left: 85%; }

.grafik-tablo {
    margin-top: 10px;
    font-size: .9rem;
}

.grafik-tablo summary {
    cursor: pointer;
    color: var(--grafik-yazi);
    font-weight: 600;
}

.grafik-tablo table {
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.grafik-tablo caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 6px;
    color: var(--grafik-yazi);
    font-size: .84rem;
}

.grafik-tablo th,
.grafik-tablo td {
    text-align: left;
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--grafik-izgara);
}

.grafik-not {
    color: var(--grafik-yazi);
    font-size: .84rem;
}

.grafik-tablo td:last-child,
.grafik-tablo th:last-child { text-align: right; }

/*
 * Dar ekran: x etiketlerinin yarisi; dort-alti etiket 360 piksele
 * sigmiyor. Birinci, ucuncu, besinci... kaliyor.
 *
 * Son etiketi ZORLA tutmak denendi ve telefonda "Oca 2026" ile
 * "Tem 2026" ust uste bindi: sona hizalanan etiket bir oncekiyle
 * arasinda yer birakmiyor. Seyreltme duzenli olmali, istisnasiz.
 */
@container (max-width: 520px) {
    .grafik-x span:nth-child(even) { display: none; }
}

/*
 * Kural once ekran genisligine (@media) bagliydi. Ana sayfada kartlar iki
 * sutunda dar ama ekran genis oldugu icin seyreltme calismiyor, "Oca 2025"
 * ile "Tem 2025" masaustunde ust uste biniyordu. Grafigin kendi genisligi
 * olculuyor artik. Container query'yi bilmeyen eski tarayicida butun
 * etiketler gorunur — eski davranis.
 */
@media (max-width: 520px) {
    .grafik-govde { grid-template-rows: 180px auto; }
}

@media (forced-colors: active) {
    .grafik-cizgi { stroke: CanvasText; }
    .grafik-nokta { background: CanvasText; }
    .grafik-dolgu { opacity: 0; }
}

/* --- Ana sayfa bolumu (includes/ana_grafikler.php) ---------------------- */

.ana-grafikler { margin: 0 0 8px; }

/* Genis ekranda iki sutun; dar ekranda alt alta. */
.ana-grafikler-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 900px) {
    .ana-grafikler-izgara { grid-template-columns: 1fr; }
}

.ana-grafik-kart {
    background: var(--kart, #ffffff);
    border-radius: var(--yuvarlak, 10px);
    box-shadow: var(--golge);
    padding: 18px 20px 14px;
    min-width: 0;
}

.ana-grafik-kart h3 {
    margin: 0;
    font-size: 1.05rem;
}

.ana-grafik-kart .grafik { margin-top: 8px; }
.ana-grafik-kart .grafik-ust { margin-bottom: 10px; }
.ana-grafik-kart .grafik-govde { grid-template-rows: 170px auto; }

@media (max-width: 520px) {
    .ana-grafik-kart .grafik-govde { grid-template-rows: 150px auto; }
}

/* Guncel olmayan veri: okuyucuya acikca soyleniyor (bkz. grafik_guncellik). */
.grafik-bayat {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 3px solid #b45309;
    background: rgba(180, 83, 9, .08);
    font-size: .82rem;
    line-height: 1.45;
    color: #7c2d12;
}

@media (prefers-color-scheme: dark) {
    :where(:root:not([data-tema="acik"])) .grafik-bayat { color: #fdba74; background: rgba(251, 146, 60, .12); border-left-color: #fb923c; }
}

:where(:root[data-tema="koyu"]) .grafik-bayat { color: #fdba74; background: rgba(251, 146, 60, .12); border-left-color: #fb923c; }