/* ============================================================
   MEDYA.CSS  —  Adila Manuel Terapi
   medya.php + medya-detay.php ortak CSS
   ============================================================ */

:root {
    --primary:       #b98476;
    --primary-dark:  #9a6a5c;
    --primary-light: #f8ebe6;
    --text-dark:     #5a3a31;
    --text-mid:      #7a5a51;
    --text-light:    #b09490;
    --bg:            #fafafa;
    --white:         #ffffff;
    --border:        rgba(185,132,118,0.15);
    --shadow-sm:     0 4px 20px rgba(90,58,49,0.07);
    --shadow-md:     0 8px 40px rgba(90,58,49,0.12);
    --radius:        16px;
    --radius-sm:     10px;
    --transition:    0.35s cubic-bezier(0.4,0,0.2,1);
    --yt-red:        #ff0000;
    --ig-grad:       linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}

/* ============================================================
   HERO
   ============================================================ */
.medya-hero {
    background: linear-gradient(135deg,#fcf5f2 0%,#fff8f5 50%,#fdf1ec 100%);
    padding: 70px 20px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.medya-hero::before {
    content:'';
    position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(185,132,118,.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(185,132,118,.05) 0%, transparent 40%);
    pointer-events:none;
}
.medya-hero-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }

.medya-hero-label {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
    color:var(--primary); letter-spacing:2px; text-transform:uppercase; margin-bottom:18px;
}
.medya-hero-label a { color:var(--primary); text-decoration:none; transition:opacity var(--transition); }
.medya-hero-label a:hover { opacity:.7; }

.medya-hero-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(36px,5vw,58px); font-weight:500;
    color:var(--text-dark); line-height:1.15; margin-bottom:16px;
}
.medya-hero-title em { font-style:italic; color:var(--primary); }

.medya-hero-desc { font-family:'Jost',sans-serif; font-size:16px; font-weight:300; color:var(--text-mid); line-height:1.7; }

.medya-hero-line {
    width:60px; height:3px;
    background:linear-gradient(to right,var(--primary),rgba(185,132,118,.2));
    border-radius:2px; margin:30px auto 0;
}

/* ============================================================
   ANA SEKME ÇUBUĞU
   ============================================================ */
.medya-main-tabs-wrap {
    background:#fff;
    border-bottom:2px solid var(--border);
    position:sticky; top:0; z-index:100;
    box-shadow: 0 2px 12px rgba(90,58,49,.06);
}
.medya-main-tabs {
    max-width:1300px; margin:0 auto;
    display:flex; gap:0;
    padding:0 20px;
}
.medya-main-tab {
    display:inline-flex; align-items:center; gap:9px;
    padding:18px 28px;
    font-family:'Jost',sans-serif; font-size:14px; font-weight:600;
    color:var(--text-mid);
    background:none; border:none; cursor:pointer;
    position:relative; transition:color var(--transition);
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
}
.medya-main-tab i { font-size:20px; }
.medya-main-tab::after {
    content:''; position:absolute;
    bottom:-2px; left:0; right:0; height:3px;
    background:var(--primary);
    transform:scaleX(0); transition:transform var(--transition);
    border-radius:2px 2px 0 0;
}
.medya-main-tab:hover  { color:var(--primary); }
.medya-main-tab.active { color:var(--primary); }
.medya-main-tab.active::after { transform:scaleX(1); }

/* ============================================================
   ANA SECTION
   ============================================================ */
.medya-section  { padding:50px 20px 100px; background:var(--bg); }
.medya-container { max-width:1300px; margin:0 auto; }

.medya-panel         { display:none; }
.medya-panel.active  { display:block; }

/* ============================================================
   BOŞ DURUM
   ============================================================ */
.medya-empty { text-align:center; padding:80px 20px; color:var(--text-light); }
.medya-empty i { font-size:64px; display:block; margin-bottom:16px; opacity:.5; }
.medya-empty p { font-size:16px; }

/* ============================================================
   KATEGORİ GRID — FOTOĞRAF (medya.php)
   ============================================================ */
.medya-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:28px;
}

.medya-card {
    display:block; text-decoration:none;
    border-radius:var(--radius); overflow:hidden;
    background:var(--white); box-shadow:var(--shadow-sm);
    position:relative;
    transition:transform var(--transition), box-shadow var(--transition);
    opacity:0; transform:translateY(30px);
}
.medya-card.visible { animation:cardFadeIn .55s ease forwards; }
.medya-card:hover   { transform:translateY(-6px); box-shadow:var(--shadow-md); }

.medya-card-img { position:relative; width:100%; padding-top:68%; overflow:hidden; }
.medya-card-img img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .6s ease;
}
.medya-card:hover .medya-card-img img { transform:scale(1.06); }
.medya-card-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to bottom, transparent 30%, rgba(90,58,49,.75) 100%);
}
.medya-card-content { position:absolute; bottom:0; left:0; right:0; padding:24px 22px; z-index:2; }
.medya-card-count { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:rgba(255,255,255,.75); letter-spacing:1px; margin-bottom:8px; }
.medya-card-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:500; color:#fff; line-height:1.25; margin-bottom:14px; }
.medya-card-btn {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Jost',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:1.5px; text-transform:uppercase;
    color:#fff; padding:8px 16px;
    border:1px solid rgba(255,255,255,.4); border-radius:50px;
    background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
    transition:all var(--transition);
}
.medya-card:hover .medya-card-btn { background:var(--primary); border-color:var(--primary); }

/* ============================================================
   KATEGORİ TABS — FOTOĞRAF DETAY (medya-detay.php)
   ============================================================ */
.medya-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.medya-tab {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 20px; border-radius:50px;
    font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
    color:var(--text-mid); background:var(--white);
    border:1px solid var(--border); text-decoration:none;
    transition:all var(--transition); box-shadow:var(--shadow-sm);
}
.medya-tab:hover, .medya-tab.active {
    background:var(--primary); border-color:var(--primary);
    color:#fff; box-shadow:0 4px 15px rgba(185,132,118,.35);
}

/* ============================================================
   MASONRY GRID — FOTOĞRAF DETAY
   ============================================================ */
.medya-masonry { columns:4; column-gap:16px; }
.medya-thumb {
    break-inside:avoid; margin-bottom:16px;
    border-radius:var(--radius-sm); overflow:hidden;
    position:relative; cursor:pointer; box-shadow:var(--shadow-sm);
    opacity:0; transform:translateY(20px);
}
.medya-thumb.visible { animation:cardFadeIn .45s ease forwards; }
.medya-thumb img { display:block; width:100%; height:auto; transition:transform .5s ease; }
.medya-thumb:hover img { transform:scale(1.05); }
.medya-thumb-overlay {
    position:absolute; inset:0; background:rgba(90,58,49,.45);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity var(--transition);
}
.medya-thumb:hover .medya-thumb-overlay { opacity:1; }
.medya-thumb-overlay i { font-size:36px; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }

/* ============================================================
   VIDEO FİLTRE ÇUBUĞU
   ============================================================ */
.video-filter-bar {
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom:30px;
}
.vfb-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 20px; border-radius:50px;
    font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
    color:var(--text-mid); background:var(--white);
    border:1px solid var(--border); cursor:pointer;
    transition:all var(--transition); box-shadow:var(--shadow-sm);
}
.vfb-btn:hover, .vfb-btn.active {
    background:var(--primary); border-color:var(--primary);
    color:#fff; box-shadow:0 4px 15px rgba(185,132,118,.35);
}

/* ============================================================
   VIDEO GRID — YouTube ve Instagram
   9:16 dikey kart düzeni
   ============================================================ */
.video-grid {
    display:grid;
    /* 9:16 kartlar için dar kolonlar — max 200px genişlik */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:24px;
}

/* Reels grid biraz daha dar — daha fazla kart sığsın */
.reel-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.video-card {
    display:flex; flex-direction:column;
    border-radius:var(--radius-sm); overflow:hidden;
    background:var(--white); box-shadow:var(--shadow-sm);
    position:relative;
    transition:transform var(--transition), box-shadow var(--transition);
    opacity:0; transform:translateY(24px);
}
.video-card.visible { animation:cardFadeIn .5s ease forwards; }
.video-card:hover   { transform:translateY(-5px); box-shadow:var(--shadow-md); }

/* ---- YouTube Thumbnail: 9:16 dikey ---- */
.video-thumb-wrap {
    position:relative;
    display:block;
    width:100%;
    padding-top:177.78%; /* 9:16 = 100/9*16 */
    overflow:hidden;
    background:#111;
    text-decoration:none;
    flex-shrink:0;
}
.video-thumb-wrap img {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    /* YouTube thumbnail yatay gelir, biz dikey kırpıyoruz — ortadan */
    object-position:center center;
    transition:transform .6s ease;
}
.video-card:hover .video-thumb-wrap img { transform:scale(1.06); }

.video-thumb-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,.28);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition);
}
.video-card:hover .video-thumb-overlay { background:rgba(0,0,0,.45); }

.play-circle {
    width:54px; height:54px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#fff;
    border:2px solid rgba(255,255,255,.7);
    backdrop-filter:blur(4px);
    transition:transform var(--transition);
}
.video-card:hover .play-circle { transform:scale(1.15); }
.yt-play-circle { background:rgba(255,0,0,.8); border-color:var(--yt-red); }

/* ---- Kategori Rozeti ---- */
.video-kat-badge {
    position:absolute; top:10px; left:10px;
    padding:3px 10px; border-radius:20px;
    font-family:'Jost',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:.5px; text-transform:uppercase; z-index:3;
}
.yt-kat-badge { background:rgba(204,0,0,.88); color:#fff; }
.ig-kat-badge { background:var(--ig-grad); color:#fff; }

/* ---- Instagram Embed: 9:16 ---- */
.ig-embed-wrap {
    position:relative;
    width:100%;
    padding-top:177.78%; /* 9:16 */
    overflow:hidden;
    background:#fafafa;
    flex-shrink:0;
}
.ig-embed-wrap iframe {
    position:absolute; inset:0;
    width:100%; height:100%;
    border:none; display:block;
}

/* ---- Kart Alt Bilgi ---- */
.video-card-info {
    padding:12px 12px 14px;
    display:flex; flex-direction:column; gap:10px;
    flex-grow:1;
}
.video-card-title {
    font-family:'Jost',sans-serif; font-size:13px; font-weight:600;
    color:var(--text-dark); line-height:1.4; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.video-watch-btn {
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 10px; border-radius:8px; font-size:12px; font-weight:700;
    text-decoration:none; transition:opacity var(--transition);
    font-family:'Jost',sans-serif; letter-spacing:.3px;
    margin-top:auto;
}
.video-watch-btn:hover { opacity:.85; }
.yt-watch-btn { background:#1a1a1a; color:#fff; }
.ig-watch-btn { background:var(--ig-grad); color:#fff; }

/* ============================================================
   LİGHTBOX
   ============================================================ */
.lightbox {
    position:fixed; inset:0; z-index:9999;
    background:rgba(20,10,8,.93);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
    backdrop-filter:blur(8px);
}
.lightbox.open { opacity:1; pointer-events:all; }
.lb-content {
    position:relative; max-width:90vw; max-height:88vh;
    display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lb-content img { max-width:90vw; max-height:78vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 20px 80px rgba(0,0,0,.5); display:block; }
.lb-caption { font-family:'Jost',sans-serif; font-size:14px; font-weight:400; color:rgba(255,255,255,.7); text-align:center; min-height:20px; }
.lb-counter { font-family:'Jost',sans-serif; font-size:12px; font-weight:500; color:rgba(255,255,255,.4); letter-spacing:2px; }

.lb-close, .lb-prev, .lb-next {
    position:fixed; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15); color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background var(--transition); backdrop-filter:blur(4px);
}
.lb-close { top:20px; right:20px; width:44px; height:44px; border-radius:50%; font-size:20px; }
.lb-prev, .lb-next { top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; font-size:22px; }
.lb-prev { left:20px; }
.lb-next { right:20px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--primary); border-color:var(--primary); }

/* ============================================================
   ANİMASYON
   ============================================================ */
@keyframes cardFadeIn {
    to { opacity:1; transform:translateY(0); }
}

/* ============================================================
   RESPONSİVE
   ============================================================ */
@media (max-width:1100px) {
    .medya-masonry { columns:3; }
    .medya-grid    { grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
    .video-grid    { grid-template-columns:repeat(auto-fill, minmax(175px,1fr)); }
    .reel-grid     { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
}

@media (max-width:768px) {
    .medya-hero    { padding:50px 16px 40px; }
    .medya-section { padding:30px 16px 70px; }
    .medya-masonry { columns:2; }
    .medya-grid    { grid-template-columns:1fr 1fr; gap:16px; }
    .medya-card-title { font-size:18px; }
    .medya-main-tab span { display:none; }   /* sadece ikon göster */
    .medya-main-tab { padding:16px 20px; }
    .video-grid    { grid-template-columns:repeat(3, 1fr); gap:14px; }
    .reel-grid     { grid-template-columns:repeat(3, 1fr); gap:14px; }
    .lb-prev { left:8px; } .lb-next { right:8px; }
    .lb-prev, .lb-next { width:40px; height:40px; font-size:18px; }
}

@media (max-width:500px) {
    .medya-masonry { columns:1; }
    .medya-grid    { grid-template-columns:1fr; }
    .video-grid    { grid-template-columns:repeat(2, 1fr); gap:12px; }
    .reel-grid     { grid-template-columns:repeat(2, 1fr); gap:12px; }
    .medya-tabs    { gap:8px; }
    .medya-tab     { font-size:12px; padding:7px 14px; }
}