:root{
    --ag-orange:#EA7A48;
    --ag-bg:#fff;
    --ag-card-radius:18px;
    --ag-shadow:0 8px 22px rgba(0,0,0,.08);
    --ag-text:#111;
}

/* Grid */
.ag-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
    gap:28px;
}

/* Card */
.ag-card{
    background:var(--ag-bg);
    border-radius:var(--ag-card-radius);
    box-shadow:var(--ag-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* Cover */
.ag-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
}
.ag-thumb img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
}
.ag-thumb::after{
    /* subtle vignette so text/buttons pop on any image */
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.18));
    pointer-events:none;
}

/* Big play (centered white circle, orange icon) */
.ag-play{
    position:absolute; inset:0; margin:auto;
    width:56px; height:56px; border-radius:50%;
    background:#fff; color:var(--ag-orange);
    display:flex; align-items:center; justify-content:center;
    border:0; padding:0; cursor:pointer; z-index:2;
    box-shadow:0 10px 24px rgba(0,0,0,.20);
}

/* Profile badge on cover, bottom-left with pink ring */
.ag-avatar{
    position:absolute; left:18px; bottom:-24px;
    width:86px; height:86px; border-radius:50%;
    background:#F6CDD3; display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    z-index:2;
}
.ag-avatar img{ width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; background:#fff; }

/* Body */
.ag-body{ padding:28px 22px 22px; }
.ag-subtitle{
    font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#222; display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
.ag-verified{ display:inline-flex; }

.ag-title{
    font-family:"Copernicus", Georgia, serif;
    font-weight:700; font-size:22px; line-height:1.25; color:var(--ag-text);
    margin:0 0 14px;
}

/* Watch row (text link with small play) */
.ag-cta{ margin-top:auto; }
.ag-watch{
    appearance:none; border:0; background:transparent;
    color:var(--ag-orange); font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px; padding:0;
}
.ag-watch-ico{ display:inline-flex; }

/* -------- Modal -------- */
.ag-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.ag-modal.is-open{ display:block; }
.ag-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.ag-modal__dialog{
    position:relative; margin:5vh auto; max-width:960px; background:#fff;
    border-radius:24px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); z-index:1;
}

.ag-modal__close{
    position:absolute; right:14px; top:10px; width:36px; height:36px; border-radius:50%;
    border:0; background:#fff; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.2); font-size:22px; line-height:36px;
    z-index:3;
}

.ag-modal__header{ position:relative; }
.ag-modal__cover{ width:100%; height:320px; object-fit:cover; display:block; }
.ag-modal__play{
    position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
    background:#fff; color:var(--ag-orange); border:0; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.ag-modal__avatar{
    position:absolute; left:22px; bottom:-32px; width:96px; height:96px; border-radius:50%;
    background:#F6CDD3; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.ag-modal__avatar img{ width:80px; height:80px; border-radius:50%; object-fit:cover; background:#fff; display:block; }
.ag-modal__brand{ position:absolute; left:132px; bottom:-6px; font-weight:700; }

.ag-modal__content{ padding:32px 26px 8px; }
.ag-modal__content h2{
    font-family:"Copernicus", Georgia, serif; font-weight:700; font-size:40px; line-height:1.1; margin:0 0 14px;
}
.ag-modal__desc{ color:#222; line-height:1.65; }
.ag-sep{ border:0; border-top:1px solid #eee; margin:18px 0; }
.ag-facts{ display:flex; gap:26px; }
.ag-facts span{ display:block; color:#777; font-size:13px; }
.ag-facts strong{ font-size:16px; }

/* Modal footer */
.ag-modal__footer{ padding:16px 26px 26px; display:flex; gap:12px; align-items:center; }
.ag-btn{
    display:inline-flex; align-items:center; gap:10px; border-radius:84px; padding:12px 22px; font-weight:700; cursor:pointer; text-decoration:none;
}
.ag-btn--primary{ background:#2E7D32; color:#fff; }
.ag-btn--ghost{ background:#fff; border:1.5px solid #e6e6e6; color:#111; }

.ag-share{ display:flex; gap:12px; }
.ag-share[hidden]{ display:none !important; }

/* Responsive */
@media (max-width: 720px){
    .ag-modal__cover{ height:220px; }
    .ag-modal__content h2{ font-size:30px; }
}

/* ===== HERO ===== */
.ag-hero{
    border-radius:20px;
    background:linear-gradient(180deg,#f6f9ff, #fff);
    padding:36px 18px;
    margin:0 0 28px;
}
.ag-hero__inner{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center;
}
.ag-hero__media img{
    width:100%; height:auto; display:block; border-radius:20px; object-fit:cover;
}
.ag-hero__title, h1{ font-size:44px !important; line-height:62; margin:4px 0 12px; }
.ag-hero__desc{ color:#243; line-height:30px; font-size:20px; font-family: 'CentraNo2' }
.ag-hero__btn{ margin-top:14px; }

@media (max-width: 980px){
    .ag-hero__inner{ grid-template-columns:1fr; }
    .ag-hero__title{ font-size:36px; }
}

/* ===== FILTERS ===== */
.ag-filters{ display:flex; align-items:center; gap:18px; margin:6px 0 16px; }
.ag-filters__title{ font-weight:700; color:#333; }
.ag-filters__pills{ display:flex; gap:10px; flex-wrap:wrap; }
.ag-filters .pill{
    border:1px solid #e9e9e9; background:#fff; color:#333;
    padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600;
}
.ag-filters .pill.is-active{ background:#fff3ec; border-color:#ffd9c8; color:#EA7A48; }

/* grid item for filtering */
.ag-item[hidden]{ display:none !important; }


.ag-btn {
    padding: 18px 38px;
    border-radius: 84px;
    font-size: 20px;
    line-height: 30px;
    font-family: 'CentraNo2';
    border-width: 2px;
    background-color: #f26737;
    border-style: solid;
    display: flex;
    text-align: center;
    align-items: center;
    width: fit-content;
    height: 60px;
    margin-top: 30px;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
}

a.ag-btn.ag-btn--primary:hover {
    color:white !important;
}






/* icon */
.ag-btn__icon {
    display: inline-flex;
    width: 18px; height: 18px;
    transition: transform .2s ease;
}

/* responsive (küçük ekranlarda biraz küçült) */
@media (max-width: 640px){
    .ag-btn { height: 48px; padding: 0 22px; font-size: 16px; }
    .ag-btn__icon { width: 16px; height: 16px; }
}