/* ApartmanPro — telefon ekranı bileşeni (inc/telefon_bolumu.php)
 *
 * İki ayrı sayfada çalışır: index.php (v2.css) ve en.php (style.css).
 * Bu yüzden kendi değerlerini taşır ve sayfanın jetonu varsa onu kullanır
 * (var(--metin-2, #55617D) gibi) — hangi sayfada olduğunu bilmek zorunda
 * kalmaz. Başlık biçimi de burada: index.php'de .etiket/.buyuk sınıfları
 * var, en.php'de yok; bileşen ikisinde de aynı görünsün.
 *
 * Görselde yalnız EKRAN var; gövde, çerçeve ve dinamik ada burada çizilir.
 * Böylece dil değişince yalnız ~40 KB'lık ekran iner, çerçeve yerinde kalır.
 */

.tel-bolum .tel-etiket {
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--marka, #3B5BDB); background: var(--marka-sis, #EEF1FE);
    border-radius: 999px; padding: 7px 15px;
}
.tel-bolum .bolum-bas h2 {
    font-size: clamp(27px, 3.4vw, 40px); font-weight: 800;
    letter-spacing: -.7px; margin: 14px 0;
}
.tel-bolum .tel-giris {
    margin: 0; font-size: clamp(16px, 1.35vw, 19px);
    color: var(--metin-2, #55617D);
}

.tel-sira {
    display: grid;
    gap: 44px 30px;
    grid-template-columns: 1fr;
    justify-items: center;
}
@media (min-width: 860px) {
    .tel-sira { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.tel-oge { margin: 0; max-width: 340px; }

/* Telefon gövdesi */
.tel {
    background: #181C26;
    border-radius: 46px;
    padding: 9px;
    box-shadow: 0 2px 4px rgba(16, 26, 51, .06), 0 22px 50px rgba(16, 26, 51, .16);
    /* İnce iç çizgi: kenar ışığı. Gövde düz siyah kalınca oyuncak gibi
       görünüyordu. */
    outline: 1px solid rgba(255, 255, 255, .10);
    outline-offset: -3px;
}
.tel-ekran { position: relative; }
.tel-ekran img {
    display: block; width: 100%; height: auto;
    border-radius: 38px;
    background: #FFF;                 /* görsel inene kadar beyaz kalsın */
}
/* Dinamik ada — ekran görüntüsündeki durum çubuğunun ortasına oturur.
   Ölçüler ekranın yüzdesi: 780×1688'lik kaynakta 190×54 px, üstten 20 px. */
.tel-ekran::after {
    content: ""; position: absolute;
    top: 1.2%; left: 50%; transform: translateX(-50%);
    width: 24.4%; height: 3.2%;
    background: #0A0A0C; border-radius: 99px;
}

/* Dil düğmeleri — JS yoksa hiç görünmezler (değiştiremezlerdi) */
.tel-dil {
    display: flex; gap: 6px; justify-content: center;
    margin: 16px auto 0; padding: 4px;
    background: var(--zemin, #FFF);
    border: 1px solid var(--cizgi, #E4E9F2);
    border-radius: 999px; width: max-content;
}
.tel-dil[hidden] { display: none; }
.tel-dil button {
    font: 600 13px/1 inherit; font-family: inherit; letter-spacing: .02em;
    padding: 9px 13px; border: 0; border-radius: 999px;
    background: transparent; color: var(--metin-2, #55617D);
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.tel-dil button:hover {
    background: var(--marka-sis, #EEF1FE); color: var(--metin, #101A33);
}
.tel-dil button[aria-pressed="true"] { background: var(--marka, #3B5BDB); color: #FFF; }
.tel-dil button:focus-visible { outline: 2px solid var(--marka, #3B5BDB); outline-offset: 2px; }

.tel-oge figcaption { margin-top: 20px; text-align: center; }
.tel-oge figcaption h3 {
    margin: 0 0 8px; font-size: 19px; font-weight: 700;
    color: var(--metin, #101A33);
}
.tel-oge figcaption p {
    margin: 0; font-size: 14.5px; line-height: 1.6;
    color: var(--metin-2, #55617D);
}
/* Üç aygıt tek görselde: üç ayrı en-boy oranını yerleşimde dengelemek
   yerine resim olarak çizildi. */
.tel-uclu { margin: 56px auto 0; max-width: 1000px; text-align: center; }
.tel-uclu h3 {
    margin: 0 0 8px; font-size: clamp(19px, 2vw, 24px); font-weight: 700;
    color: var(--metin, #101A33);
}
.tel-uclu p {
    margin: 0 auto 24px; max-width: 600px; font-size: 15.5px; line-height: 1.6;
    color: var(--metin-2, #55617D);
}
.tel-uclu img { width: 100%; height: auto; }

.tel-dipnot {
    margin-top: 40px; text-align: center;
    font-size: 12.5px; line-height: 1.7; color: var(--metin-3, #8592AD);
}

@media (prefers-reduced-motion: reduce) {
    .tel-dil button { transition: none; }
}