/*
 * Tur sayfasi (/turler/{slug}) — koyu tema, 2026-09-27.
 *
 * `sea-design.css`in UZERINE yukleniyor ve onun degiskenlerini (--sd-*)
 * kullaniyor: sayfa denizler sayfasinin tasarim dilinde. Burada yalnizca
 * ture ozgu parcalar var. Amber YALNIZCA koruma durumu ve uyarilar icin;
 * zemin hicbir yerde acik degil (kullanici acik govdeli tasarimi reddetti).
 */
.species-design { --sp-amber: #e5a551; --sp-amber-line: #e5a55166; --sp-amber-bg: #e5a5511a; --sp-cell: #ffffff0d; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.species-hero h1 { font-size: clamp(48px, 6.2vw, 104px); overflow-wrap: normal; hyphens: auto; margin-bottom: 10px; }
.species-latin { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 1.9vw, 27px); color: #e2ecea; margin: 0 0 22px; }
.species-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 12px; border: 1px solid var(--sp-amber-line); border-radius: 5px; background: var(--sp-amber-bg); color: var(--sp-amber); font-size: 11px; font-weight: 600; }
.species-badge svg { width: 16px; height: 16px; }
.species-button--amber { color: var(--sp-amber); border: 1px solid var(--sp-amber); background: #e5a55112; }
.species-button--amber:hover { background: #e5a5512b; }

/* Uc sutun, esit genislik: uzun deger (ör. uc yerel ad) KENDI sutununda
   satir atliyor. Esnek satirda ucuncu sutun alt satira dusup soldan
   girintili kaliyordu. */
.species-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; margin: 34px 0 0; }
.species-meta > div { min-width: 0; padding: 0 22px; border-left: 1px solid #ffffff33; }
.species-meta > div:first-child { padding-left: 0; border-left: 0; }
.species-meta dt { font-size: 10px; color: #dae7e7; }
.species-meta dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 17px; line-height: 1.35; color: #fff; overflow-wrap: normal; hyphens: auto; }

/* Tam bicim: balik fotografi uydu goruntusunden ACIK — sol degrade daha koyu. */
.species-hero--tam .sea-hero-photo::after { background: linear-gradient(90deg, #081e2af5 0%, #081e2ad1 33%, #081e2a5c 60%, #081e2a00 82%), linear-gradient(0deg, #061d29b8, transparent 55%); }
.species-photo-credit a { color: inherit; text-decoration: underline; }

/* Kart bicimi: dikey ya da acik zeminli fotograf sagda cerceveli. */
.species-hero--kart { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 36px; min-height: 0; padding-right: 48px; border: 1px solid var(--sd-line); border-radius: 8px; background: linear-gradient(118deg, #0d2c3a 0%, #0a2331 48%, #081e2a 100%); }
.species-hero-figure { margin: 40px 0; }
.species-hero-figure > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--sd-line); border-radius: 8px; box-shadow: 0 18px 50px #00101c73; }
.species-hero-figure figcaption { margin-top: 10px; font-size: 10px; line-height: 1.6; color: var(--sd-muted); }
.species-hero-figure figcaption a { color: inherit; text-decoration: underline; }

/* ── BOLGE SECICI ─────────────────────────────────────────────────────── */
.species-context { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 22px 0; border-bottom: 1px solid var(--sd-line); }
.species-context-label { margin: 0 6px 0 0; font-size: 12px; font-weight: 600; color: var(--sd-text); }
.species-select select { appearance: none; min-width: 190px; height: 44px; padding: 0 38px 0 14px; font: inherit; font-size: 12px; color: var(--sd-text); background: var(--sd-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afc4cb' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; border: 1px solid var(--sd-line); border-radius: 5px; cursor: pointer; }
.species-select select:disabled { opacity: .75; cursor: default; }
.species-select select:focus-visible { outline: 3px solid #0e8ed8; outline-offset: 3px; }
.species-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--sd-line); border-radius: 20px; background: var(--sd-panel); font-size: 12px; color: var(--sd-text); }
.species-context-hint { margin: 0; font-size: 11px; color: var(--sd-muted); }
.species-context-rules { margin-left: auto; }

/* ── 01 · NEREDE ──────────────────────────────────────────────────────── */
.species-subhead { margin: 34px 0 4px; font-family: var(--font-display); font-size: 19px; font-weight: 400; color: var(--sd-text); }
.species-olasi { display: inline-block; margin-left: 8px; padding: 2px 7px; border: 1px solid var(--sp-amber-line); border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--sp-amber); vertical-align: middle; }
.species-all-grounds { display: inline-block; margin-top: 14px; }
.species-design .sea-explore-aside > div > p { margin: 15px 0; font-size: 11px; line-height: 1.8; color: var(--sd-muted); }
.species-design .sea-explore-aside > div > .sea-button { width: 100%; }

/* ── 02 · SEZON ───────────────────────────────────────────────────────── */
.species-calendar-card { margin-top: 24px; padding: 24px; border: 1px solid var(--sd-line); border-radius: 6px; background: #0b2434; }
.species-calendar-region { margin: 0 0 16px; font-size: 12px; color: var(--sd-muted); }
.species-calendar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.species-month { display: flex; align-items: flex-start; justify-content: center; height: 92px; padding-top: 10px; border-radius: 4px; background: var(--sp-cell); font-size: 11px; color: var(--sd-muted); }
.species-month.is-verimli { background: #91ddd24d; color: var(--sd-text); }
.species-month.is-yil-boyu { background: #91ddd21f; color: var(--sd-text); }
.species-month.is-bu-ay { box-shadow: inset 0 0 0 2px var(--sd-accent); color: var(--sd-text); font-weight: 600; }
.species-month.is-verimli.is-bu-ay { background: var(--sd-accent); color: var(--sd-ink); }
.species-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--sd-muted); }
.species-legend li { display: flex; align-items: center; gap: 8px; }
.species-legend i { width: 12px; height: 12px; border: 1px solid var(--sd-line); border-radius: 3px; background: var(--sp-cell); }
.species-legend i.is-verimli { background: #91ddd24d; }
.species-legend i.is-bu-ay { border: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--sd-accent); }
.species-calendar-note { margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: var(--sd-text); }
.species-calendar-disclaimer { margin: 8px 0 0; font-size: 11px; color: var(--sd-muted); }
.species-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; text-align: center; font-size: 12px; color: var(--sd-muted); }
.species-empty svg { width: 34px; height: 34px; }
.species-empty-title { margin-top: 6px; font-family: var(--font-display); font-size: 20px; color: var(--sd-text); }

.species-inspect { align-self: start; padding: 22px; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-panel); }
.species-inspect h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.species-inspect-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--sd-line); color: var(--sd-text); text-decoration: none; }
.species-inspect-row > svg { margin-top: 1px; color: var(--sd-accent); }
.species-inspect-row strong { display: block; font-size: 12px; font-weight: 600; }
.species-inspect-row small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.7; color: var(--sd-muted); }
a.species-inspect-row > span:last-child { margin-left: auto; color: var(--sd-accent); }
a.species-inspect-row:hover strong { color: var(--sd-accent); }
.species-conditions { display: grid; gap: 6px; margin: 10px 0 6px; }
.species-conditions > div { display: flex; gap: 10px; font-size: 11px; line-height: 1.6; }
.species-conditions dt { min-width: 92px; color: var(--sd-muted); }
.species-conditions dd { margin: 0; color: var(--sd-text); }

/* ── 03 · YEM VE TAKIM ────────────────────────────────────────────────── */
.species-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.species-media-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-panel); color: var(--sd-text); text-decoration: none; }
.species-media-photo { display: block; aspect-ratio: 1.6; overflow: hidden; background: #0c2733; }
.species-media-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.species-media-text { padding: 14px 38px 16px 16px; }
.species-media-text strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 400; }
.species-media-text small { display: block; margin-top: 5px; font-size: 10px; color: var(--sd-muted); }
.species-media-card .sea-fish-arrow { top: auto; bottom: 18px; }
.species-media-card:hover { border-color: var(--sd-accent); }
.species-media-card:hover img { transform: scale(1.04); }
.species-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--sd-line); }
.species-notes dt { font-size: 11px; color: var(--sd-accent); }
.species-notes dd { margin: 6px 0 0; font-size: 13px; line-height: 1.75; color: var(--sd-text); }
.species-gear { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 26px; padding: 20px 22px; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-panel); }
.species-gear-intro { flex: 1 1 200px; }
.species-gear-intro strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.species-gear-intro small { display: block; margin-top: 6px; font-size: 11px; color: var(--sd-muted); }
.species-gear-item { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--sd-text); }
.species-gear-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: #0c2733; }
.species-gear > .sea-button { margin-left: auto; }

.species-recipes, .species-other-rules { margin-top: 22px; border-bottom: 1px solid var(--sd-line); }
.species-recipes > summary, .species-other-rules > summary { display: flex; align-items: center; gap: 12px; padding: 18px 0; font-size: 13px; cursor: pointer; list-style: none; }
.species-recipes > summary::-webkit-details-marker, .species-other-rules > summary::-webkit-details-marker { display: none; }
.species-recipes > summary > span:last-child, .species-other-rules > summary > span:last-child { margin-left: auto; transition: transform .2s; }
.species-recipes[open] > summary > span:last-child, .species-other-rules[open] > summary > span:last-child { transform: rotate(45deg); }
.species-recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; padding: 6px 0 26px; }

/* ── KURALLAR ─────────────────────────────────────────────────────────── */
.species-rule { display: flex; align-items: flex-start; gap: 16px; margin-top: 22px; padding: 22px 24px; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-panel); }
.species-rule > svg { width: 26px; height: 26px; margin-top: 2px; color: var(--sp-amber); }
.species-rule--amber { border-color: var(--sp-amber-line); background: linear-gradient(90deg, #e5a55114, #e5a55105); }
.species-rule-body { flex: 1; min-width: 0; }
.species-rule-body h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.species-rule-body > p { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--sd-muted); }
.species-rule-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 0; }
.species-rule-values > div { padding: 14px 16px; border: 1px solid var(--sd-line); border-radius: 5px; background: #0b2434; }
.species-rule-values dt { font-size: 10px; color: var(--sd-muted); }
.species-rule-values dd { margin: 6px 0 0; font-family: var(--font-editorial); font-size: 20px; color: var(--sd-text); }

/* ── AMBER UYARILAR ───────────────────────────────────────────────────── */
.species-notice { display: flex; align-items: flex-start; gap: 16px; margin: 28px 0 0; padding: 20px 22px; border: 1px solid #e5a5518c; border-radius: 6px; background: linear-gradient(90deg, #e5a5511f, #e5a55108); color: var(--sd-text); }
.species-notice > svg { width: 26px; height: 26px; color: var(--sp-amber); }
.species-notice-body { flex: 1; min-width: 0; }
.species-notice-title { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--sp-amber); }
.species-notice-body p:not(.species-notice-title) { margin: 6px 0 0; font-size: 12px; line-height: 1.8; color: #e6eceb; }
.species-notice-link { align-self: center; flex-shrink: 0; padding-left: 18px; border-left: 1px solid var(--sp-amber-line); font-size: 12px; font-weight: 600; color: var(--sp-amber); }
.species-notice--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.species-notice-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; color: var(--sd-text); text-decoration: none; }
.species-notice-item + .species-notice-item { border-left: 1px solid var(--sp-amber-line); }
.species-notice-item > svg { color: var(--sp-amber); }
.species-notice-item .species-notice-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
a.species-notice-item > span { margin-left: auto; color: var(--sp-amber); }
.species-nowrap { white-space: nowrap; }

/* ── KUNYE, REHBER, KAPANIS ───────────────────────────────────────────── */
.species-kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 22px 0 0; border-top: 1px solid var(--sd-line); }
.species-kunye > div { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--sd-line); }
.species-kunye dt { font-size: 10px; color: var(--sd-muted); }
.species-kunye dd { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--sd-text); }
.species-prose-text { max-width: 760px; margin-top: 18px; white-space: pre-line; font-size: 14px; line-height: 1.9; color: #dfe8e6; }
.species-final--amber { border-color: var(--sp-amber-line); background: linear-gradient(90deg, #e5a55114, var(--sd-panel)); }

/* Basliklar DENGELI kiriliyor: kapanis bandinda 520 px'lik sinir "çık."
   sozcugunu tek basina alt satira atiyordu (kullanici ekran goruntusu). */
.species-design h2 { text-wrap: balance; }
.species-design .sea-final-banner h2 { max-width: 760px; }

/* Kapanis bandi sayfanin SON ogesi (denizler sayfasinda altinda "diger
   denizler" var); bosluk verilmezse alt bilgiye yapisiyordu. */
.species-design .sea-content { padding-bottom: 72px; }

/* ── DAR EKRAN ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .species-hero h1 { font-size: clamp(46px, 7vw, 84px); }
    .species-hero--kart { gap: 24px; padding-right: 30px; }
}

@media (max-width: 760px) {
    .species-hero h1 { font-size: clamp(40px, 11vw, 60px); }
    .species-hero--tam .sea-hero-copy { padding-bottom: 150px; }
    .species-hero--kart { grid-template-columns: 1fr; gap: 0; padding: 0; border-radius: 0; border-inline: 0; }
    .species-hero--kart .sea-hero-copy { padding-bottom: 20px; }
    .species-hero-figure { margin: 0 24px 28px; }
    .species-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 26px; }
    .species-meta > div { padding: 0; border: 0; }
    .species-context { gap: 10px; }
    .species-select, .species-select select { width: 100%; }
    .species-context-rules { margin-left: 0; }
    .species-calendar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    .species-month { height: 60px; }
    .species-calendar-card { padding: 16px; }
    .species-notice { padding: 16px; }
    .species-notice-link { padding-left: 0; border-left: 0; }
    .species-notice, .species-notice--split { flex-direction: column; grid-template-columns: 1fr; }
    .species-notice-item + .species-notice-item { border-left: 0; border-top: 1px solid var(--sp-amber-line); }
    .species-rule { padding: 16px; }
    .species-gear > .sea-button { width: 100%; margin-left: 0; }
    .species-recipe-grid { grid-template-columns: 1fr; }
    /* Sabit harita dugmesi (51 px + alt bosluk) son icerigin ustune binmesin. */
    .species-design .sea-content { padding-bottom: 104px; }
}