/* =========================================================
   TDP — Türk Demokratik Partisi
   Tasarım dili: "resmi kayıt / mühür" — şeffaflık ve güven
   ========================================================= */


:root{
    --ink:        #A6111D;
    --ink-soft:   #7A0E17;
    --paper:      #FFFFFF;
    --paper-2:    #FBF2F2;
    --red:        #E30A17;
    --red-deep:   #B30B16;
    --gold:       #A9793C;
    --line:       #EBD9DA;
    --text:       #262323;
    --text-soft:  #6B6462;
    --white:      #FFFFFF;
    --radius:     10px;
    --radius-sm:  6px;
    --shadow:     0 16px 32px -16px rgba(163,17,26,.22);
    --shadow-lg:  0 28px 56px -20px rgba(163,17,26,.28);
    --serif: 'Fraunces', Georgia, serif;
    --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:  'IBM Plex Mono', 'Courier New', monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--red-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); margin:0 0 .5em; font-weight:600; line-height:1.15}
h1{font-size:clamp(2.1rem,4vw,3.4rem); font-weight:700}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{max-width:1160px; margin:0 auto; padding:0 24px}
.eyebrow{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--red-deep); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--red-deep)}
.section{padding:76px 0}
.section--tight{padding:40px 0}
.section--alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section--ink{background:var(--ink); color:#FBE3E4; position:relative; overflow:hidden}
.section--ink::before{content:""; position:absolute; bottom:-140px; left:-100px; width:380px; height:380px; background:url('../img/logo.png') center/contain no-repeat; opacity:.06; pointer-events:none}
.section--ink h2, .section--ink h3{color:#fff}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; flex-wrap:wrap; gap:12px}
.grid{display:grid; gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
    font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em; border-radius:var(--radius-sm);
    border:1px solid transparent; cursor:pointer; transition:.18s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(163,17,26,.35)}
.btn--primary{background:var(--red); color:#fff}
.btn--primary:hover{background:var(--red-deep)}
.btn--ghost{border-color:var(--ink); color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff}
.btn--ghost-light{border-color:rgba(255,255,255,.5); color:#fff}
.btn--ghost-light:hover{background:#fff; color:var(--ink)}
.btn--sm{padding:9px 16px; font-size:.82rem}

/* ---------- Header / Nav ---------- */
.topbar{background:var(--ink); color:#F3D6D7; font-size:.8rem}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px}
.topbar a{color:#F3D6D7}
.lang-switch{display:flex; gap:2px}
.lang-switch a{padding:2px 8px; border-radius:2px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em}
.lang-switch a.active{background:var(--red); color:#fff}

.site-header{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:12px}

.brand{display:flex; align-items:center; gap:12px}
.brand .seal{width:80px; height:80px; flex:none}
.brand-text{line-height:1.15}
.brand-text strong{display:block; font-family:var(--serif); font-weight:700; color:var(--ink); font-size:1.05rem}
.brand-text span{display:block; font-size:.72rem; color:var(--text-soft)}

nav.mainnav{display:flex; gap:2px; flex-wrap:wrap; align-items:center}
nav.mainnav a{
    font-size:.84rem; font-weight:600; color:var(--ink-soft); padding:10px 10px; border-radius:2px;
    transition:color .15s;
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--red-deep); text-decoration:none}
.navtoggle{display:none; background:none; border:1px solid var(--ink); border-radius:3px; padding:8px 10px; cursor:pointer}

/* Dropdown nav groups */
.navdrop{position:relative}
.navdrop__toggle{
    background:none; border:none; font:inherit; font-size:.94rem; font-weight:700; color:var(--ink-soft);
    padding:10px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; border-radius:2px;
}
.navdrop__toggle svg{opacity:.55; transition:transform .15s}
.navdrop:hover .navdrop__toggle, .navdrop.open .navdrop__toggle, .navdrop.active .navdrop__toggle{color:var(--red-deep)}
.navdrop.open .navdrop__toggle svg{transform:rotate(180deg)}
.navdrop__menu{
    position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
    min-width:230px; padding:6px; border-radius:var(--radius); opacity:0; visibility:hidden;
    transform:translateY(6px); transition:opacity .15s, transform .15s; z-index:80;
}
.navdrop:hover .navdrop__menu, .navdrop.open .navdrop__menu{opacity:1; visibility:visible; transform:translateY(0)}
.navdrop__menu a{display:block; padding:10px 12px; font-size:.85rem; border-radius:2px; color:var(--ink-soft); font-weight:500}
.navdrop__menu a:hover, .navdrop__menu a.active{background:var(--paper-2); color:var(--red-deep); text-decoration:none}

@media (max-width:1080px){
    nav.mainnav{display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding-top:10px}
    nav.mainnav.open{display:flex}
    .site-header .container{flex-wrap:wrap}
    .navtoggle{display:block}
    .navdrop{width:100%}
    .navdrop__toggle{
        pointer-events:none; width:100%; justify-content:space-between; text-transform:uppercase;
        letter-spacing:.05em; font-size:.72rem; color:var(--text-soft); padding:14px 12px 4px;
    }
    .navdrop__toggle svg{display:none}
    .navdrop__menu{
        position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
        padding:0 0 4px 6px; min-width:0;
    }
}

/* ---------- Hero ---------- */
.hero{padding:70px 0 60px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 55%)}
.hero::before{
    content:""; position:absolute; top:-120px; right:-120px; width:480px; height:480px;
    background:url('../img/logo.png') center/contain no-repeat; opacity:.05; pointer-events:none;
}
.hero .container{position:relative; display:grid; grid-template-columns:1.3fr .9fr; gap:48px; align-items:center}
@media (max-width:900px){.hero .container{grid-template-columns:1fr}}
.hero p.lede{font-size:1.12rem; color:var(--ink-soft); max-width:52ch}
.hero-slogan{font-family:var(--serif); font-weight:600; font-style:italic; color:var(--red-deep); font-size:1.15rem; margin-top:-4px}
.hero .cta-row{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}

.record-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); position:relative; padding:26px 24px;
}
.record-card::before{
    content:""; position:absolute; inset:8px; border:1px dashed #E3B7B9; pointer-events:none;
}
.record-card h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); margin-bottom:16px}
.record-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:.86rem}
.record-row:first-of-type{border-top:none}
.record-row dt{
    color:#111;
    font-family:Arial,sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:.84rem;
}
.record-row dd{
    margin:0;
    font-weight:700;
    font-style:italic;
    color:#111;
    text-align:right;
    font-family:Arial,sans-serif;
    font-size:.82rem;
}

/* ---------- Cards ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.2s}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:#E8C7C8}
.card__media{aspect-ratio:16/10; background:var(--paper-2) center/cover no-repeat; position:relative; transition:transform .35s ease}
.card:hover .card__media{transform:scale(1.04)}
.card__media .tag{position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:.68rem; padding:4px 8px; letter-spacing:.06em; text-transform:uppercase}
.card__body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__date{font-family:var(--mono); font-size:.74rem; color:var(--text-soft); letter-spacing:.04em}
.card__body h3{font-size:1.08rem; margin:0}
.card__body p{color:var(--text-soft); font-size:.92rem; margin:0}
.card__link{margin-top:auto; font-weight:600; font-size:.86rem}
.card--link{flex-direction:row; align-items:center; gap:18px; padding:22px; text-decoration:none}
.card--link h3{margin:0; font-size:1rem; color:var(--ink)}
.card--link:hover h3{color:var(--red-deep)}
.card--link img{flex:none}

/* ---------- Facebook embed wrapper ---------- */
.fb-embed{max-width:560px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

/* ---------- Person / member cards ---------- */
.person{text-align:left; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; gap:14px; align-items:flex-start}
.person img, .person .avatar{width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--paper-2); flex:none; border:1px solid var(--line)}
.person .avatar{display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--red-deep); background:var(--paper-2)}
.person h4{margin:0 0 2px; font-size:1rem; color:var(--ink); font-family:var(--serif)}
.person .role{font-family:var(--mono); font-size:.72rem; color:var(--red-deep); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:block}
.person p{font-size:.86rem; color:var(--text-soft); margin:0}

/* ---------- Document list ---------- */
.doclist{border-top:1px solid var(--line)}
.docrow{display:flex; align-items:center; gap:16px; padding:18px 4px; border-bottom:1px solid var(--line); transition:background .15s}
.docrow:hover{background:var(--paper-2)}
.docrow .icon{width:40px; height:40px; flex:none; border:1px solid var(--gold); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--mono); font-size:.65rem}
.docrow .meta{flex:1}
.docrow .meta strong{display:block; color:var(--ink); font-size:.96rem}
.docrow .meta span{font-family:var(--mono); font-size:.74rem; color:var(--text-soft)}

/* ---------- Tables (finance) ---------- */
table.finance{width:100%; border-collapse:collapse; font-size:.92rem}
table.finance th{text-align:left; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); border-bottom:2px solid var(--ink); padding:10px 12px}
table.finance td{padding:12px; border-bottom:1px solid var(--line)}
table.finance tr:hover td{background:var(--paper-2)}

/* ---------- Stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--white); border-radius:var(--radius); overflow:hidden}
.stats div{padding:22px; border-right:1px solid var(--line)}
.stats div:last-child{border-right:none}
.stats strong{display:block; font-family:var(--serif); font-size:1.8rem; color:var(--red-deep)}
.stats span{font-size:.78rem; color:var(--text-soft)}
@media (max-width:800px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label{font-size:.82rem; font-weight:600; color:var(--ink)}
.field input, .field select, .field textarea{
    border:1px solid var(--line); border-radius:2px; padding:11px 12px; font-family:var(--sans); font-size:.94rem; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--red); outline-offset:1px}
.radio-row{display:flex; gap:18px; flex-wrap:wrap}
.radio-row label{display:flex; align-items:center; gap:8px; font-weight:500; font-size:.92rem}
.alert{padding:14px 16px; border-radius:2px; margin-bottom:20px; font-size:.92rem}
.alert--success{background:#EAF3EA; border:1px solid #B9D8B9; color:#2C5A2C}
.alert--error{background:#FBEAEA; border:1px solid #E5B7B7; color:#8C1B25}

/* ---------- Breadcrumb / page header ---------- */
.pagehead{background:var(--ink); color:#fff; padding:52px 0 44px; position:relative; overflow:hidden}
.pagehead::before{content:""; position:absolute; top:-100px; right:-100px; width:340px; height:340px; background:url('../img/logo.png') center/contain no-repeat; opacity:.06; pointer-events:none}
.pagehead .container{position:relative}
.pagehead .eyebrow{color:#E8B36B}
.pagehead .eyebrow::before{background:#E8B36B}
.pagehead h1{color:#fff; margin-bottom:6px}
.pagehead p{color:#F6DBDC; max-width:60ch; margin:0}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--ink); color:#EFC7C9; padding:56px 0 24px; margin-top:0}
footer.site-footer h4{color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px}
footer.site-footer a{color:#EFC7C9; font-size:.9rem}
footer.site-footer a:hover{color:#fff}
footer.site-footer .flinks{display:flex; flex-direction:column; gap:9px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:.8rem; flex-wrap:wrap; gap:10px}
.footer-brand strong{color:#fff; font-family:var(--serif); font-size:1.15rem}
.social-row{display:flex; gap:10px; margin-top:14px}
.social-row a{width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.small{font-size:.85rem; color:var(--text-soft)}
.divider{height:1px; background:var(--line); margin:40px 0}
.tag-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.tag-filter a{padding:7px 14px; border:1px solid var(--line); border-radius:20px; font-size:.82rem; color:var(--ink-soft)}
.tag-filter a.active{background:var(--ink); border-color:var(--ink); color:#fff}
.empty-state{padding:50px 20px; text-align:center; color:var(--text-soft); border:1px dashed var(--line)}

/* ---------- Chairman layouts (responsive, always centered) ---------- */
.chairman-strip{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
.chairman-strip .chairman-photo{width:150px; height:150px}
.chairman-profile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; max-width:640px; margin:0 auto}
.chairman-profile .chairman-photo{width:200px; height:200px}
.chairman-photo{
    border-radius:50%; overflow:hidden; flex:none; position:relative; background:var(--paper-2);
    border:4px solid #fff; box-shadow:0 0 0 2px var(--red), var(--shadow);
}
.chairman-photo img{width:100%; height:100%; object-fit:cover; object-position:top center}
.chairman-profile .bio-text{text-align:left; font-size:1.02rem; line-height:1.85; max-width:640px}
@media (max-width:480px){
    .chairman-strip .chairman-photo{width:110px; height:110px}
    .chairman-profile .chairman-photo{width:150px; height:150px}
}

/* ---------- Statute / legal document text ---------- */
.legal-doc{max-width:760px}
.legal-doc h2{font-size:1.5rem; margin-bottom:2px}
.legal-doc h3{margin-top:44px; padding-top:20px; border-top:2px solid var(--ink); font-size:1.15rem; letter-spacing:.03em}
.legal-doc h4.sub{margin-top:28px; color:var(--red-deep); font-family:var(--sans); font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em}
.legal-doc h4.article{margin-top:20px; margin-bottom:6px; font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--red-deep); font-weight:700}
.legal-doc p{font-size:.95rem; line-height:1.75; color:var(--text)}

/* ---------- Flipsnack seçim programı embed ---------- */
.flipsnack-embed{
    position:relative; width:100%; padding-bottom:66%; height:0;
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--paper-2);
}
.flipsnack-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%}
@media (max-width:640px){
    .flipsnack-embed{padding-bottom:130%}
}