/* =========================================
   1. DEĞİŞKENLER (RENK PALETİ)
   ========================================= */
:root {
    /* --- Light Mode (Varsayılan) --- */
    --ph-code-bg: #1e1e1e;           /* Arka plan (VS Code Grisi) */
    --ph-code-header-bg: #2d2d2d;    /* Header Arka Planı (Biraz daha açık) */
    --ph-code-text: #d4d4d4;         /* Genel Metin Rengi */
    --ph-code-border: #333333;       /* Çerçeve Rengi */
    --ph-code-num-bg: #252526;       /* Satır Numarası Arka Planı */
    --ph-code-num-text: #858585;     /* Satır Numarası Rengi */
    --ph-code-num-border: #333333;   /* Satır Numarası Sağ Çizgi */
    --ph-code-hover: rgba(255, 255, 255, 0.04); /* Satır Hover Rengi */

    /* --- Syntax Highlighting (Renklendirme) --- */
    --ph-code-syn-keyword: #c586c0;  /* if, function, return */
    --ph-code-syn-string: #ce9178;   /* "string" */
    --ph-code-syn-comment: #6a9955;  /* // yorum */
    --ph-code-syn-number: #b5cea8;   /* 123 */
    --ph-code-syn-tag: #569cd6;      /* <div>, <?php */
    --ph-code-syn-attr: #9cdcfe;     /* class= */
    --ph-code-syn-val: #ce9178;      /* "value" */
    --ph-code-syn-sel: #d7ba7d;      /* .class */
    --ph-code-syn-prop: #9cdcfe;     /* color: */
    --ph-code-syn-var: #9cdcfe;      /* $degisken */
}

/* --- Dark Mode Override --- */
/* Site genelinde data-theme="dark" varsa veya
   sadece kod bloğunda data-theme="dark" varsa tetiklenir */
[data-theme="dark"] {
    /* Zaten koyu tema olduğu için sadece sınırları belirginleştiriyoruz */
    --ph-code-border: #454545;
    --ph-code-num-border: #454545;
    --ph-code-header-bg: #333333;
}


/* =========================================
   2. ANA İSKELET (YENİ SATIR SİSTEMİ)
   ========================================= */

/* Ana Kapsayıcı */
.ph-code-wrapper {
    position: relative;
    background: var(--ph-code-bg);
    color: var(--ph-code-text);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6; /* Rahat okuma için satır yüksekliği */
    border: 1px solid var(--ph-code-border);
    border-radius: 8px;
    overflow: hidden; /* Köşelerden taşmayı önle */
    margin: 20px 0;
    
    /* Flex Column: Satırları alt alta dizer */
    display: flex;
    flex-direction: column;
    padding: 0; /* Header geldiği için genel paddingi sıfırladık */
    width: 100%;
    box-sizing: border-box;
}

/* --- YENİ BÖLÜM: Header Bar (Dil ve Kopyala) --- */
.ph-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ph-code-header-bg);
    padding: 10px 15px;
    border-bottom: 1px solid var(--ph-code-border);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600; 
	text-transform: uppercase;
}

.ph-code-header * {
	    font-size: 13px !important; 

}

.ph-header-lang {
    font-weight: bold;
    font-size: 12px;
    color: var(--ph-code-num-text);
    letter-spacing: 0.5px;
	display: flex;
    align-items: center;
    gap: 7px;
}

.ph-header-lang i {
	    font-size: 16px !important;
}


.ph-header-copy {
    color: var(--ph-code-text);
    font-size: 16px !important;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color 0.3s ease;
}

.ph-header-copy:hover {
    color: var(--ph-accent);
}

.ph-header-copy i {
    font-size: 16px !important;
}
/* ----------------------------------------------- */

/* Her Bir Kod Satırı (Numara + Kod) */
.ph-code-row {
    display: flex;       /* Yan yana diz */
    align-items: stretch; /* Yükseklikleri eşitle (Kritik nokta burası) */
    width: 100%;
}

.ph-code-header + .ph-code-row .ph-line-content,
.ph-code-header + .ph-code-row .ph-line-num {
    padding-top: 10px;
}

.ph-code-wrapper > .ph-code-row:last-of-type .ph-line-content,
.ph-code-wrapper > .ph-code-row:last-of-type .ph-line-num {
    padding-bottom: 10px;
}

/* Satır Hover Efekti (Okumayı kolaylaştırır) */
.ph-code-row:hover {
    background-color: var(--ph-code-hover);
	transition: background 0.3s ease;
}

/* --- Sol Taraf: Satır Numarası --- */
.ph-line-num {
    background: var(--ph-code-num-bg);
    color: var(--ph-code-num-text);
    min-width: 45px;      /* Sabit genişlik */
    padding: 0 10px;      /* İç boşluk */
    text-align: right;    /* Sağa yasla */
    border-right: 1px solid var(--ph-code-num-border);
    user-select: none;    /* Seçilemesin (Kopyalamayı engellemek için) */
    flex-shrink: 0;       /* Asla küçülmesin */
    
    /* Metni hizalamak için */
    display: flex;
    justify-content: flex-end;
    /* align-items iptal edildi, line-height ile hiza sağlanacak */
}

/* --- Sağ Taraf: Kod İçeriği --- */
.ph-line-content {
    flex-grow: 1;         /* Kalan boşluğu doldur */
    padding: 0 15px;      /* Sağ-Sol boşluk */
    
    /* Satır Kaydırma Kuralları (Wrap) */
    white-space: pre-wrap;       /* Boşlukları koru ama sığmazsa aşağı at */
    word-break: break-word;      /* Çok uzun kelimeleri böl */
    overflow-wrap: break-word;   /* Modern tarayıcı desteği */
    min-width: 0;                /* Flex taşmasını önler */
}


/* =========================================
   3. SYNTAX HIGHLIGHTING (RENKLENDİRME)
   ========================================= */
.ph-code-keyword    { color: var(--ph-code-syn-keyword); font-weight: bold; }
.ph-code-string     { color: var(--ph-code-syn-string); }
.ph-code-comment    { color: var(--ph-code-syn-comment); font-style: italic; }
.ph-code-number     { color: var(--ph-code-syn-number); }
.ph-code-tag        { color: var(--ph-code-syn-tag); }
.ph-code-attr-name  { color: var(--ph-code-syn-attr); }
.ph-code-attr-value { color: var(--ph-code-syn-val); }
.ph-code-selector   { color: var(--ph-code-syn-sel); }
.ph-code-property   { color: var(--ph-code-syn-prop); }
.ph-code-variable   { color: var(--ph-code-syn-var); }


/* =========================================
   4. ÖZELLEŞTİRMELER (OPSİYONEL)
   ========================================= */

/* Numaraları Gizleme (data-numbers="off") */
.ph-code-wrapper[data-numbers="false"] .ph-line-num {
    display: none;
}
.ph-code-wrapper[data-numbers="false"] .ph-line-content {
    padding-left: 20px; /* Numara yoksa sol boşluğu artır */
}

/* Scrollbar (Eğer çok nadir de olsa yatay scroll gerekirse şık görünsün) */
.ph-code-wrapper ::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.ph-code-wrapper ::-webkit-scrollbar-track {
    background: var(--ph-code-bg);
}
.ph-code-wrapper ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}
.ph-code-wrapper ::-webkit-scrollbar-thumb:hover {
    background: #555;
}