/* Katman 2: Objects (o-) + Components (c-) */

/* --- Objects --- */
.o-sarmal { width: min(100% - 2 * var(--kenar), var(--genislik)); margin-inline: auto; }
.o-wiki { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem 3rem; }
@media (min-width: 60rem) {
  .o-wiki { grid-template-columns: var(--toc-genislik) minmax(0, 1fr); align-items: start; }
}
.o-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

/* --- İlerleme çubuğu --- */
.c-ilerleme { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--bordo-cizgi); z-index: 50; }
.c-ilerleme span { display: block; height: 100%; width: 0; background: var(--bordo); transition: width .1s linear; }

/* --- Üst başlık --- */
.c-baslik { background: var(--kagit); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 40; }
.c-baslik__ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 4rem; padding-block: .5rem; }
.c-marka { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--murekkep); letter-spacing: -.01em; }
.c-marka svg { flex: none; }
.c-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .25rem; }
.c-menu a { display: block; padding: .4rem .6rem; text-decoration: none; color: var(--murekkep-soluk); font-size: .95rem; border-bottom: 2px solid transparent; }
.c-menu a:hover { color: var(--bordo); }
.c-menu a[aria-current="page"] { color: var(--bordo); border-bottom-color: var(--bordo); font-weight: 600; }

/* --- İçindekiler --- */
.c-icindekiler { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 2px; padding: 1rem 1.1rem; font-size: .9rem; position: sticky; top: 5rem; }
.c-icindekiler__baslik { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--murekkep-soluk); margin-bottom: .5rem; }
.c-icindekiler__baslik + ul, .c-icindekiler ol { margin-bottom: 1.25rem; padding-left: 1.2rem; }
.c-icindekiler ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.c-icindekiler li { margin-bottom: .25rem; }
.c-icindekiler a { color: var(--murekkep); text-decoration: none; }
.c-icindekiler a:hover { color: var(--bordo); text-decoration: underline; }
.c-icindekiler__bos { color: var(--murekkep-soluk); font-style: italic; margin-bottom: 1.25rem; }
@media (max-width: 59.99rem) { .c-icindekiler { position: static; } }

/* --- Madde (main) --- */
.c-madde { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 2px; padding: clamp(1.25rem, 3vw, 2.5rem); min-width: 0; }
.c-madde__not { font-size: .85rem; color: var(--murekkep-soluk); font-style: italic; margin-bottom: 1.5rem; }
.c-madde__govde h2 { scroll-margin-top: 5rem; }
.c-konum { font-size: .85rem; color: var(--murekkep-soluk); margin-bottom: 1rem; }
.c-konum a { color: var(--murekkep-soluk); }

/* --- Giriş (ana sayfa) --- */
.c-giris { position: relative; padding: 1rem 0 1.5rem; margin-bottom: 1rem; }
.c-giris h1 { border-bottom: 0; padding-bottom: 0; }
.c-giris__slogan { font-size: 1.2rem; color: var(--murekkep-soluk); max-width: 46rem; }
.c-giris__suslem { display: block; width: 12rem; height: 2.5rem; margin-top: 1rem; }

/* --- Düğme --- */
.c-dugme { display: inline-block; background: var(--bordo); color: #fff; padding: .7rem 1.4rem; border: 2px solid var(--bordo); border-radius: 2px; font-weight: 600; text-decoration: none; cursor: pointer; margin-right: .5rem; margin-bottom: .5rem; }
.c-dugme:hover { background: var(--bordo-koyu); border-color: var(--bordo-koyu); color: #fff; }
.c-dugme--ikincil { background: transparent; color: var(--bordo); }
.c-dugme--ikincil:hover { background: var(--bordo-acik); color: var(--bordo-koyu); }

/* --- Bağlantı kutuları --- */
.c-kutu { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--cizgi); border-left: 4px solid var(--bordo); background: var(--bordo-acik); text-decoration: none; color: var(--murekkep); }
.c-kutu:hover { border-color: var(--bordo); }
.c-kutu strong { font-size: 1.1rem; }
.c-kutu span { color: var(--murekkep-soluk); font-size: .95rem; }
.c-kutu em { color: var(--bordo); font-style: normal; font-size: .9rem; font-weight: 600; }
.c-baglanti-ok::after { content: " →"; }

/* --- SSS --- */
.c-sss { border-top: 1px solid var(--cizgi); margin-bottom: 1.25rem; }
.c-sss__madde { border-bottom: 1px solid var(--cizgi); }
.c-sss__madde summary { padding: .85rem .25rem; font-weight: 600; list-style: none; position: relative; padding-right: 2rem; }
.c-sss__madde summary::-webkit-details-marker { display: none; }
.c-sss__madde summary::after { content: "+"; position: absolute; right: .5rem; top: .7rem; color: var(--bordo); font-size: 1.3rem; font-weight: 400; }
.c-sss__madde[open] summary::after { content: "–"; }
.c-sss__yanit { padding: 0 .25rem 1rem; color: var(--murekkep-soluk); }

/* --- Form --- */
.c-form { max-width: 36rem; }
.c-form label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.c-form input, .c-form textarea { width: 100%; padding: .6rem .7rem; border: 1px solid #cbb9b9; border-radius: 2px; background: #fff; color: var(--murekkep); }
.c-form input:focus, .c-form textarea:focus { border-color: var(--bordo); }
.c-uyari { padding: .8rem 1rem; border-left: 4px solid; margin-bottom: 1rem; }
.c-uyari--basari { border-color: #15803d; background: #f0fdf4; color: #14532d; }
.c-uyari--hata { border-color: var(--bordo); background: var(--bordo-acik); color: var(--bordo-koyu); }
.c-tablo { max-width: 36rem; }

/* --- Alt bilgi --- */
.c-alt { background: var(--murekkep); color: #e7dcdc; padding: 2rem 0; font-size: .9rem; }
.c-alt__ic { display: grid; gap: .75rem; }
.c-alt__metin { max-width: 50rem; margin-bottom: 0; }
.c-alt__baglanti { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.c-alt a { color: #fca5a5; }
.c-alt a:hover { color: #fff; }
.c-alt__telif { margin: 0; color: #a89f9f; }

/* --- Görseller: giriş kapağı (ana sayfa) --- */
.c-giris__kapak { margin: 0 0 1.25rem; border: 1px solid var(--cizgi); border-radius: 2px; padding: .35rem; background: var(--kagit); }
.c-giris__kapak img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }

/* --- Görseller: wiki tarzı küçük resim kutusu (iç sayfalar) --- */
.c-kucukresim { float: right; clear: right; width: min(100%, 22rem); margin: .25rem 0 1rem 1.5rem; padding: .35rem; border: 1px solid var(--cizgi); background: var(--bordo-acik); font-size: .8rem; }
.c-kucukresim__resim { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--cizgi); }
.c-kucukresim__altyazi { padding: .4rem .25rem 0; color: var(--murekkep-soluk); line-height: 1.4; }
.c-madde__govde::after { content: ""; display: table; clear: both; }
@media (max-width: 45rem) {
  .c-kucukresim { float: none; width: 100%; margin: 0 0 1.25rem; }
}

/* --- Blog: dizin listesi --- */
.c-dizin { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--cizgi); }
.c-dizin__oge { display: grid; grid-template-columns: 1fr; gap: .75rem 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--cizgi); }
.c-dizin__oge:has(.c-dizin__resim) { grid-template-columns: 11rem minmax(0, 1fr); }
.c-dizin__resim { display: block; border: 1px solid var(--cizgi); padding: .25rem; background: var(--bordo-acik); }
.c-dizin__resim img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.c-dizin__baslik { font-size: 1.15rem; margin: 0 0 .15rem; }
.c-dizin__baslik a { text-decoration: none; }
.c-dizin__baslik a:hover { text-decoration: underline; }
.c-dizin__tarih { display: inline-block; font-size: .8rem; color: var(--murekkep-soluk); font-variant-numeric: tabular-nums; margin-bottom: .35rem; }
.c-dizin__ozet { margin: 0; color: var(--murekkep-soluk); font-size: .95rem; }
.c-dizin--sik .c-dizin__oge { padding: .6rem 0; }
.c-dizin--sik .c-dizin__oge:has(.c-dizin__resim) { grid-template-columns: 7rem minmax(0, 1fr); }
.c-dizin--sik .c-dizin__baslik { font-size: 1rem; }
@media (max-width: 40rem) {
  .c-dizin__oge:has(.c-dizin__resim), .c-dizin--sik .c-dizin__oge:has(.c-dizin__resim) { grid-template-columns: 1fr; }
}

/* --- Blog: sayfalama --- */
.c-sayfalama { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 0; border-top: 3px double var(--bordo-cizgi); font-size: .95rem; }
.c-sayfalama__durum { color: var(--murekkep-soluk); order: 1; }
.c-sayfalama__onceki { order: 0; }
.c-sayfalama__sonraki { order: 2; margin-left: auto; }

/* --- Blog: yazı sayfası --- */
.c-yazi__meta time { font-style: normal; font-weight: 600; }
.c-yazi__kapak { margin: 0 0 1.5rem; padding: .35rem; border: 1px solid var(--cizgi); background: var(--kagit); }
.c-yazi__kapak img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.c-gezinti { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--cizgi); font-size: .95rem; }
.c-gezinti span:last-child { text-align: right; }
@media (max-width: 40rem) { .c-gezinti { grid-template-columns: 1fr; } .c-gezinti span:last-child { text-align: left; } }

/* --- Blog: ana sayfa güncesi ve "Ayrıca bakınız" --- */
.c-gunce { margin: 0 0 1rem; border-left: 4px solid var(--bordo); padding-left: 1rem; }
.c-gunce dt { font-weight: 600; margin-top: .6rem; }
.c-gunce dt time { font-weight: 400; font-size: .8rem; color: var(--murekkep-soluk); margin-right: .5rem; font-variant-numeric: tabular-nums; }
.c-gunce dd { margin: .15rem 0 .5rem; color: var(--murekkep-soluk); font-size: .95rem; }
.c-ayrica { list-style: square; padding-left: 1.4rem; margin-bottom: .5rem; }
.c-ayrica__tarih { color: var(--murekkep-soluk); font-size: .85rem; }